使用 Javascript 循环遍历相同的多选下拉菜单

Question

如何通过迭代循环遍历相同的表单元素来确定选择多个中的哪些项目已被指定？

我需要能够确定我在哪个选择框上进行操作，然后从该框中找到用户选择的所有条目。页面上的选择数量各不相同 - 它是根据 dB 中的信息在服务器端建立的。

这些值是虚拟​​的，但这可能是一个月中每天 10 次不同的活动。用户可以每天从零到全部选择，然后处理这些值。

代码中有关于我所面临问题的具体点的 cmets。

诸如使用表单刷新处理每个选择的替代方案是不可行的。所有信息都需要在一个页面上输入，然后作为整个数据集立即处理。如果存在这样的解决方案，我愿意接受使用 jQuery 或 Angular 等工具集的解决方案。

我尝试使用构建变量指向数组索引，并尝试将对象复制到本地数组，该数组非常适合单步执行，但随后我丢失了 .selected 属性。我已经搜索了这个网站和整个网络，但我没有找到关于这个问题的参考。

<form name=frm id=frm>
<select multiple id=s_1 name=s_1>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>

<select multiple id=s_2 name=s_2>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>

<a onclick="procSel(2);">Go</a> <!-- number of form elements -->
</form>

<script>

function procSel(elCount);
var j;
for (j=0;j<elCount;j++) {
    var sel = 's_'+j;
    var selLen = document.getElementById(sel).length;
    for (i=0;i<selLen;i++) {
        //this is where I would use something like this
        //but element s_1 isn't known by name directly, the page may
        //have anywhere from 1 to 100 (or more) separate selects
        if (document.forms.frm.s_1[i].selected) {
          //this is where I would know J (the specific select item on the form)
          //and the value of one of the selections made for the drop down
        }
    }

}
</script>

Answer 1

你真的很接近这一点。我只需要改变一些东西就可以让它工作：

1. 您的select 元素被命名为s_1 和s_2，但您的外循环从0 到1 计数，而不是从1 到2。
2. 如果您有 document.forms.frm.s_1[i]，您可以使用 document.forms.frm[sel][i] 来引用当前循环迭代的 select 元素。
3. 更好的是，不用在一个地方使用document.getElementById(sel) 而在另一个地方使用document.forms.frm[sel][i]，您可以保存第一个引用并在两个地方都使用它。这也使代码更加清晰，而不是使用两种截然不同的方式来获取相同的元素。

所以代码最终看起来像这样：

function procSel( elCount ) {
    console.clear();
    for( var j = 1;  j <= elCount;  j++ ) {
        var sel = 's_' + j;
        var select = document.getElementById( sel );
        for( var i = 0;  i < select.length; i++ ) {
            if( select[i].selected ) {
                console.log( sel, document.forms.frm[sel][i].value );
            }
        }
    }
}

这是一个有效的fiddle。

另一种方法是让 jQuery 为您完成工作。为方便起见，为每个select 标签添加一个通用class。例如，我向它们添加了class="selects"，然后你的procSel() 函数的这个非常简单的版本就可以工作了：

function procSel() {
    console.clear();
    $('.selects').each( function( i, select ) {
        var $options = $(select).find('option:selected');
        $options.each( function( i, option ) {
            console.log( select.id, option.value );
        });
    });
}

请注意，您也不需要将elCount 传递给procSel()。这是updated fiddle。