防止在多个选择列表中单击+拖动选择

时间:2013-09-23 15:48:32

标签: javascript html

我有一个多选列表,我想通过在其中使用点击+拖动来禁用选择功能,这样每次点击只能选择一个新值 - 但同时我想继续操作将列表作为“多个”选择,这样我仍然可以使用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事件中不处理这些值或者事件被完全取消。但希望有一个更简单的解决方案。

1 个答案:

答案 0 :(得分:0)

好吧,我找不到在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");
            }
    }