多个选择元素 - onchange

时间:2011-04-05 12:20:08

标签: javascript jquery html

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

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

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

9 个答案:

答案 0 :(得分:17)

检查jsFiddle Link

多重选择的

.val()返回一个数组。

答案 1 :(得分:8)

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

JSFiddle Link

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

答案 2 :(得分:5)

如果你可以使用jQuery,它可能很简单:

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

答案 3 :(得分:1)

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

答案 4 :(得分:1)

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

这有效:

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

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

答案 7 :(得分:0)

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

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

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

答案 8 :(得分:0)

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

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

中使用类似的模式