使用锚点切换多项选择选项

Question

我正在寻找一种简单的方法来“总结”（或选择多个）选择中的选项。

我给你一个例子，它会更容易。所以我有：

<select name="test1" id="test_1" multiple="multiple">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
</select>

另一方面，我有：

<a href="#form" onclick="document.getElementById('test_1').selectedIndex = 0;">Add to selection</a>
<a href="#form" onclick="document.getElementById('test_1').selectedIndex = 1;">Add to selection</a>
<a href="#form" onclick="document.getElementById('test_1').selectedIndex = 2;">Add to selection</a>

因此，单击这些链接中的每一个都会选择其中的每个选项，而取消选择所有其他选项。

我想要实现的是“总结选项”。这意味着单击链接将切换选项选择，而不是进行绝对选择。因此，如果我单击链接 1，然后单击链接 3，最终结果将同时选择“值 1”和“值 3”选项。如果我再次单击链接 3，它将取消选择“值 3”选项。

我希望它足够清楚以获得一些帮助。我不在乎它是 jQuery 还是 Javascript 解决方案。真的很感激！

Answer 1

您不能为此使用selectedIndex，因为它被定义为第一个 选择<option> 的索引。而是在您想要的 HTMLOptionElements 上设置 selected 属性；

<select name="test1" id="test_1" multiple="multiple">
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
    <option value="val3">Value 3</option>
</select>

function select(sel, idx) {
    sel.options[idx].selected = true;
}

function deselect(sel, idx) {
    sel.options[idx].selected = false;
}

var elm = document.getElementById('test_1');
select(elm, 0);   // select each one
select(elm, 1);
select(elm, 2);
deselect(elm, 1); // deselect something
// only options 0 and 2 left selected

DEMO

Answer 2

这是一个可以完成这项工作的 jQuery 解决方案。

HTML：

<select name="test1" id="test_1" multiple="multiple">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
</select>

    <a href="#form" data-val="val1">Add to selection</a>
    <a href="#form" data-val="val2">Add to selection</a>
    <a href="#form" data-val="val3">Add to selection</a>

JavaScript：

$('a').click(function(ev)
             {
                 ev.preventDefault();
                 var dataValue = $(this).data('val');
                 var select = $("#test_1 option[value='" + dataValue + "']")[0]; 
                 select.selected = !select.selected;    
             });

jsFiddle Demo Click Here!

Answer 3

    <style>
        .blue {
            width: 200px;
            height: 200px;
            background: mediumslateblue;
            display: none;
        }

        .turquaz {
            width: 200px;
            height: 200px;
            background: teal;
        }
    </style>

不要处理任何其他复杂的功能。

<select class="select">
    <option value="blue">Blue</option>
    <option value="turquaz">Turquaz</option>
</select>

<div class="blue"></div>
<div class="turquaz"></div>

和 jQuery

<script>
    $('.select').change(function () {
        if ($(this).val() == "blue") {
            $('.blue').show();
            $('.turquaz').hide();
        } else if ($(this).val() == "turquaz") {
            $('.blue').hide();
            $('.turquaz').show();
        }
    });
</script>

您可以使用 slideUp 和 SlideDown 来代替隐藏和显示。