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

debugcn 发表于 Dev

悍马

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

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

<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解决方案。真的很感激！

加加地语

这是完成任务的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演示点击这里！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。