Question

我有一个select元素允许多个选择。当用户对所选内容进行更改时，我想在页面的另一部分（div或其他部分）中显示所选值。

执行此操作的唯一方法是迭代“选项”并检查“已选择”是否为真？这不是优选的，因为每个“onchange”事件都需要迭代整个select元素。

这是一个小提琴，演示了我目前是如何做到的，但我希望可能有更好的方法，而不是迭代每个“变化”的所有选项：multiple select elment onchange fiddle

Answer 1

检查jsFiddle Link

多重选择的

.val()返回一个数组。

Answer 2

在你的小提琴中，我只使用了.val()。这将返回一个数组

JSFiddle Link

$(function() {
    $('#fruits').change(function() {
        console.log($(this).val());
    }); 
});

Answer 3

如果你可以使用jQuery，它可能很简单：

$('select').change(function() {alert($(this).val())})

Answer 4

您可以使用模糊而不是更改，因此选择仅处理一次，而不是每次选择。 http://jsfiddle.net/2mSUS/3/

Answer 5

$(function() {
    $('#fruits').change(function(e) {
        var selected = $(e.target).val();
        console.dir(selected);
    }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple="true" id="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="mango">Mango</option>
    <option value="grape">Grape</option>
    <option value="watermelon">watermelon</option>
</select>

Answer 6

您可以使用:selected Selector of jQuery代替，但我相信，jQuery会对selected = true进行循环。

Answer 7

这有效：

var MyControl = document.getElementById('Control_ID');
var newValue = MyControl[MyControl.selectedIndex].value;

当然，Control_ID是选择控件的ID。

Answer 8

element.addEventListener('click', function(){alert(this.value)})

这是JS的一个解决方案，你可以很容易地将它移植到jQuery。我们的想法是为选择中的每个选项添加一个单击侦听器。由于addEventListener，这在IE8及以下版本中无效，但有很多方法可以解决这个问题。

我认为这是一个更好的方法，然后不得不在列表上重申。但是，您必须为每个选项附加一个侦听器。

Answer 9

我正在做表单提交。我的模板助手看起来像这样：

 'submit #update': function(event) {
    event.preventDefault();
    var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection
    var array_opts = Object.values(obj_opts);  //convert to array
    var stray = array_opts.map((o)=> o.text ); //to filter by: text, value or selected
    //stray is now ["Test", "Milk Free"] for example, depending on the selection
    //...do stuff...
}

您可以在＆＃39; onchange＆＃39;

中使用类似的模式

多个选择元素 - onchange

9 个答案: