Question

我有以下列表给用户

<select id="regions" multiple="multiple">
  <option value='us-west' selected="selected">US West Coast</option>
  <option value='us-east' selected="selected">US East Coast</option>
  <option value='eur' selected="selected">Europe</option>
  <option value='asia' selected="selected">Asia</option>
</select>

如上所示，所有项目都被选中。

我正在尝试实现一个jquery函数，如果用户单击列表中的选项，则只会删除所单击的项目（比如说Europe），而其他选项都会被选中。我知道这可以通过按住“CTRL”并单击来实现，但是有一种方法可以让所有用户只需单击吗？

我试过这个功能：

  <script type="text/javascript">
    function(){
        $("#regions options:selected").removeAttr("selected");
    };
  </script>

Answer 1

所以我花了一段时间，但我认为我有你想要的功能。

Check this fiddle

这个想法是，创建一个数组来跟踪所选的内容。如果您只需单击，则多选框的自然行为是取消选择所有其他选择并选择您单击的内容。

因此，我们不会关注选择框中的内容，而是查看单击了哪个选项（在mousedown上）并将其添加到我们所选内容的个人列表中，然后更新选择框以反映列表中的内容（在鼠标松开）。

这可以防止用户拖动以在选择框中选择多个项目，但是能够做到这一点可能会搞砸它。

var selection = [];

$('#the_box > option').mousedown(function(){

    if(selection.length < 1){
        selection.push($(this).val());
    } else {
        var found = 0;
        for(i = 0; i < selection.length; i++) {
            if(selection[i] == $(this).val()){
                selection.splice(i, 1);
                found = 1;
                break;
            }
        }
        if(found === 0){
            selection.push($(this).val());
        }
    }
});

$('#the_box').bind('mouseup mouseout', function(){
    $(this).children('option').each(function(){
        $(this).removeAttr('selected');
    });
    $(this).children('option').each(function(){
        for(i = 0; i < selection.length; i++){
            if($(this).val() == selection[i]){
                $(this).attr('selected','selected');
            }
        }
    });
});

但是，您可以只使用一个列表或一组div来执行此操作，而不是使用本机<select>标记，如果您使用此方法实际上会更容易（由于不必解决选择框的默认行为）：P

Answer 2

您可以使用：

$('option').click(function(){
    $(this).removeAttr('selected', 'selected')
    .siblings().attr('selected', 'selected');
});

此功能的作用是删除所点击项目的当前选择状态，但重新选择整个兄弟姐妹设置。

请参阅此fiddle。

更新：由于使用键盘，我们可以向控件发送另一个信号（另一个标志），我们仍然需要使用鼠标以某种方式模拟它。例如，我们可以假设右键单击就像Ctrl +单击，左键单击就是单击。但是，右键单击在Web中不是一个好的模式，并不常见。

另一种选择可能是重新定义我们的业务以使控件的行为不同（例如，在鼠标单击时，如果已经选择了对象，则取消选择它，如果未选中，则将其添加到选定的整个集合中）选项）。但是这种方法的缺点是用户在使用控件时会迷失方向，因为它远离普通的HTML控件，并且每天都与它们进行交互。换句话说，改变控件的行为并不是关于UX的好解决方案。

Answer 3

这绝不是完美的解决方案，但欢迎您尝试。

附加功能（请注意，这允许在选择项目后触发回调功能..例如，如果您想根据选择填充其他列表）

$('#mySelect').click(function () {
    singleClickList(this, myCallbackFunction);
});

功能：

function singleClickList(mythis, callback) {
    var selected = $(mythis).data('selected');
    if (selected == undefined) selected = [];
    var scrollTop = mythis.scrollTop;
    var current = $(mythis).val();
    var index;
    if (current != null) {
        if (current.length > 0) {
            index = $.inArray(current[0], selected);
            if (index >= 0)
                selected.splice(index, 1);
            else
                selected.push(current[0]);
        }
        $(mythis).val(selected);
        $(mythis).data('selected', selected);
        mythis.scrollTop = scrollTop;
        if (callback) callback();
    }
}

请注意，这需要jquery，并使用jquery .data方法来存储所选项的数组。

在没有键盘的情况下从列表中选择和取消选择多个选项

3 个答案: