多选元素 - onchange答案

【问题标题】：multiple select element - onchange多选元素 - onchange
【发布时间】：2011-04-05 12:20:07
【问题描述】：

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

这样做的唯一方法是遍历“选项”并检查“选定”是否为真？这不是可取的，因为每个“onchange”事件都需要遍历整个 select 元素。

这是一个演示我目前如何做的小提琴，但我希望也许有比每次“更改”都迭代所有选项更好的方法：multiple select elment onchange fiddle

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

.val() 在多选时返回一个数组。

以下面的 sn-p 为例：

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

【讨论】：

【解决方案2】：

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

JSFiddle Link

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

【讨论】：

【解决方案3】：

如果你可以使用 jQuery，它可能就像这样简单：

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

【讨论】：

【解决方案4】：

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

【讨论】：

这不合适，正如@codecraig 所说的“因为用户对所选内容进行了更改”

【解决方案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>

【讨论】：

【解决方案6】：

您可以改用:selected Selector of jQuery，但我相信在底层，jQuery 会在 selected = true 上执行循环。

【讨论】：

【解决方案7】：

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

这是一个 JS 的解决方案，你可以很容易地将它移植到 jQuery。这个想法是为选择中的每个选项添加一个点击监听器。由于addEventListener，这在 IE8 及更低版本中不起作用，但有一些方法可以解决这个问题。

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

【讨论】：

【解决方案8】：

这行得通：

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

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

【讨论】：

这并没有回答如何处理多个选定值的问题。

【解决方案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...
}

您可以对“onchange”使用类似的模式

【讨论】：