javascript - 使用 Javascript 循环访问相同的多选下拉列表

Question

如何迭代循环相同的表单元素来确定已指定多选项中的哪些项目？

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

这些值是虚拟​​的，但这可能类似于一个月中每天 10 种不同的事件。用户可以每天从零到全部进行选择，然后处理这些值。

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

诸如通过表单刷新处理每个选择之类的替代方案是不可行的。所有信息都需要在一个页面上输入，然后作为整个数据集立即处理。如果存在这样的解决方案，我愿意接受使用 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] 来引用 选择当前循环迭代的 元素。
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 标记添加一个公共(public) 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 .