Javascript 使用定位切换多个选择选项

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

我给你举个例子，这样比较容易。因此，我：

<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>

值1
价值2
价值3

另一方面，我有：

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

您不能为此使用

selectedIndex

，因为它被定义为第一个选定

的索引。而是在所需的HTMLOptionElements上设置所选属性

值1
价值2
价值3

功能选择（sel，idx）{
sel.options[idx].selected=true；
}
功能取消选择（sel、idx）{
sel.options[idx].selected=false；
}
var elm=document.getElementById（'test_1'）；
选择（elm，0）；//选择每一个
选择（elm，1）；
选择（elm，2）；
取消选择（elm，1）；//取消选择某物
//仅选择了选项0和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>

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

蓝先生{
宽度：200px；
高度：200px；
背景：中蓝色；
显示：无；
}
turquaz先生{
宽度：200px；
高度：200px；
背景：水鸭；
}

不要处理任何其他复杂的函数

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

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

蓝色
Turquaz

和jQuery

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

$（'.select'）.change（函数（）{
if（$（this.val（）=“blue”）{
$（'.blue'）.show（）；
$（'.turquaz'）.hide（）；
}else if（$（this.val（）=“turquaz”）{
$（'.blue'）.hide（）；
$（'.turquaz'）.show（）；
}
});

---

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

太好了，它工作得非常好！我尝试取消注释，但再次单击链接不会切换选择。我怎样才能让它工作？或者我错过了什么？非常感谢，对不起！小虫子。固定的！再次感谢您的帮助！我真的很感激。但有一个问题，它只能用于选择还是取消选择选项？难道没有一种方法可以通过点击同一个链接将选项的状态从选中切换到取消选中吗？是的，取消对代码的注释，我进行了更新以使其正常工作。测试后请接受答案。别介意，我只是自己加的。非常感谢你的帮助。这就是我想要实现的，我现在能做到，多亏了你，多亏了你的回答，保罗。问题是，我想通过单击这些链接来更改选项的选定状态。我想实际切换状态，这样我就可以通过单击相同的链接来选择或取消选择。我正在努力想办法，但不知道如何做到这一点。你有什么建议？

！真===假

，

！false===true

，所以使用

x=！x

切换模式。此代码为反模式。每次添加新颜色时，都必须创建IF逻辑以切换正确的状态。还是不相信我？更新代码以显示10个不同的选项。以上是我的答案，代码不会增长。然而，这将以指数形式出现。

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