1

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

我需要能够确定我正在操作哪个选择框，然后从该框中找到用户选择的所有条目。页面上的选择数量各不相同 - 它是在服务器端根据 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>
4

1 回答 1

1

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

  1. 您的select元素被命名为s_1and s_2，但您的外部循环从0through计数1，而不是1through 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 );
            }
        }
    }
}

这是一个工作小提琴。

另一种方法是让 jQuery 为您完成工作。为方便起见，class请为每个select标签添加一个共同点。例如，我添加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()一个。这是一个更新的小提琴。

于 2013-09-24T06:12:14.917 回答