Javascript 多选元素 - onchange
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5551680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
multiple select element - onchange
提问by codecraig
I have a select element that allows for multiple selections. I'd like to display the selected values in another part of the page (in a div or something) as the user makes changes to what is selected.
我有一个允许多选的 select 元素。当用户对所选内容进行更改时，我想在页面的另一部分（在 div 或其他内容中）显示所选值。
Is the only way of doing this to iterate over the "options" and check if "selected" is true? this would not be preferable since each "onchange" event would require the entire select element to be iterated over.
这样做的唯一方法是迭代“选项”并检查“选择”是否为真？这不是可取的，因为每个“onchange”事件都需要迭代整个选择元素。
Here's a fiddle that demonstrates how I am currently doing it, but I'm hoping maybe there's a better way than having to iterate over all the options on every "change": multiple select elment onchange fiddle
这是一个演示我目前如何做的小提琴，但我希望也许有比在每次“更改”时迭代所有选项更好的方法：multiple select elment onchange fiddle
回答by StuperUser
.val()on a multiple select returns an array.
.val()在多选上返回一个数组。
See the snippet below as an example:
请参阅下面的代码段作为示例：
$(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>回答by JohnP
In your fiddle, I just used .val(). This returns an array
在你的小提琴中，我刚刚使用了.val(). 这将返回一个数组
$(function() {
$('#fruits').change(function() {
console.log($(this).val());
});
});
回答by zindel
If you could use jQuery it might be as easy as:
如果您可以使用 jQuery，它可能就像：
$('select').change(function() {alert($(this).val())})
回答by shanethehat
You could use blur instead of change, so that the select is only processed once, rather than on each selection. http://jsfiddle.net/2mSUS/3/
您可以使用模糊而不是更改，以便选择仅处理一次，而不是对每个选择进行处理。http://jsfiddle.net/2mSUS/3/
回答by Cyril N.
You can use the :selected Selector of jQueryinstead, but I believe that under the hood, jQuery does a loop on the selected = true.
您可以改用jQuery的:selected Selector，但我相信在幕后，jQuery 在 selected = true 上执行循环。
回答by alexK85
element.addEventListener('click', function(){alert(this.value)})
This is a solution in JS, you can port it over to jQuery pretty easily. The idea is to add a click listener to each option in the selection. This will not work in IE8 and below because of addEventListener, there are ways to get around this though.
这是 JS 中的解决方案，您可以非常轻松地将其移植到 jQuery。这个想法是为选择中的每个选项添加一个点击监听器。这在 IE8 及以下版本中不起作用，因为addEventListener有一些方法可以解决这个问题。
I think this is a better approach then having to reiterate over the list. You will have to have a listener attached to each option though.
我认为这是一个更好的方法，然后必须重申列表。但是，您必须为每个选项附加一个侦听器。
回答by Steve Taylor
I'm doing a form submit. My template helper looks like this:
我正在做一个表单提交。我的模板助手看起来像这样：
'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...
}
You could use a similar pattern for 'onchange'
您可以对“onchange”使用类似的模式
回答by Barry
This works:
这有效：
var MyControl = document.getElementById('Control_ID');
var newValue = MyControl[MyControl.selectedIndex].value;
Of course, Control_ID is the ID of the select control.
当然，Control_ID 是选择控件的 ID。
