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，因为它被定义为 first 选择<option>的索引。而是在您想要的 HTMLOptionElements 上设置选定的属性;

<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隐藏并显示。

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

3 个答案: