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

Selecting and Deselecting multiple options from list without keyboard

本文关键字：选择 列表 选项 取消 键盘 情况下      更新时间：2023-09-26

我有下面的列表呈现给用户

<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函数，如果用户单击列表上的一个选项，只有被单击的项目(假设欧洲)将被删除，而其余的选项被选中。我知道这可以通过按住"CTRL"并单击来实现，但是是否有一种方法可以让用户只需单击即可?

我试过这个函数:

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

这花了我一点时间，但我想我有你想要的功能。

检查这个小提琴

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

因此，而不是关心什么是在选择框，我们看到哪个选项被点击(在鼠标向下)，并将其添加到我们的个人列表的选择，然后更新选择框，以反映什么在我们的列表(在鼠标向上)。

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

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>标记，如果使用此方法(由于不必绕过selectbox的默认行为)，这实际上会更容易:p

您可以使用:

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

这个函数的作用是删除被单击项的当前选择状态，但是重新选择整个兄弟集合。

看这提琴

Update:因为通过使用键盘，我们可以发送另一个信号(另一个标志)到控件，我们仍然需要用鼠标模拟它。例如，我们可以假设右键就像Ctrl+click，而左键点击只是单击。然而，右键在web中并不是一个好的模式，也不是那么常见。

另一个选项可以是重新定义我们的业务，以使控件的行为不同(例如，在鼠标单击时，如果对象已被选中，则取消选中它，如果它未被选中，则将其添加到所选选项的整个集合中)。但是这种方法的缺点是用户在使用控件时会迷失方向，因为它与他们每天与之交互的普通HTML控件相距甚远。换句话说，改变控件的行为并不是一个很好的UX解决方案。

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

附加函数(注意，这允许在选择项后触发回调函数)。例如，如果您想要基于选择填充另一个列表)

$('#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方法来存储所选项的数组。

相关文章：