防止在多选列表中进行点击+拖动选择

Question

我有一个多选列表，并且我想禁用在其中使用点击+拖动的方式进行选择的功能，以便每次只能通过单击选择一个新值 - 但同时，我仍然希望将该列表作为“多个”选择来操作，以便我仍然可以使用control+click选择多个值。

我已经尝试了在标签上使用onselectstart和ondragstart进行调整，但它们似乎在多选列表中没有起作用。例如：

<Select id="foo" name="foo[]" multiple="yes" onselectstart="return false" onchange="ajaxFunction()" Size="5">  
    <option value="" selected>Any</option>  
    <option value="bar"  ondragstart=" return false;">foo</option>  
    <option value="foobar">bar</option> 
    <option value="barfoo">foobar</option>
</Select>

我怀疑我需要使用JavaScript而不是纯HTML。特别是选择列表会触发一个onchange事件，这可能是关键所在——一个想法是以某种方式计算每个onchange事件触发的选择数量，如果超过一个，则这些值不会在onchange事件中处理或者事件被完全取消。希望有更简单的解决方案。

- user2468499

---

请发布一些代码和截图以澄清具体情况。JSFiddle是解决HTML+CSS+JS问题的好工具。 - chryss

好的，我已经去掉了多余的信息并添加了一些示例代码。感谢JSFiddle建议。 - user2468499

Answer 1

嗯，我找不到在HTML中禁用拖放的方法，但我成功地编写了一个能够通过刷新页面来取消多个新选择的函数。看起来这是为了不怎么有效果而进行的很多花哨动作，但无论如何它对我的目的起到了作用。在标记此为最佳答案之前，我将在一两天内保持此问题开放，以防有人提出更好的解决方案。

function ajaxfunction(sel)
    {
        var total_selections_counter = 0;
            //i.e. total selections passed to the onchange event, whether selected previously or not
        var overlapping_selections_counter = 0;
            //i.e. selections which were already selected and are also re-selected and passed to the onchange event
        for (var i = 0; i < sel.options.length; i++)
            {
                if(sel.options[i].selected)
                    {
                        total_selections_counter++;
                    }
                if(sel.options[i].selected && sel.options[i].defaultSelected)
                    {
                        overlapping_selections_counter++;
                    }
            }
        var new_selections_counter = total_selections_counter - overlapping_selections_counter;
        if(new_selections_counter > 1)
            {
                location.reload(true);
            }
        else
            {
               alert("continue processing");
            }
    }

- user2468499