使用Javascript循环通过相同的多个选择Drop Downs

时间:2013-09-24 03:10:50

标签: javascript html forms variables select

如何迭代循环遍历相同的表单元素以确定选择倍数中的哪些项目已被指定?

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

1 个答案:

答案 0 :(得分:1)

你真的非常接近。我只需要改变一些东西就可以了:

  1. 您的select个元素的名称为s_1s_2,但您的外部循环从01,而不是1到{ {1}}。
  2. 您拥有2的位置可以使用document.forms.frm.s_1[i]来引用当前循环迭代的document.forms.frm[sel][i]元素。
  3. 更好的是,您可以保存第一个引用并在两个地方使用它,而不是在一个地方使用select而在另一个地方使用document.getElementById(sel)。这也使代码更加清晰,而不是使用两种截然不同的方式来获取相同的元素。
  4. 所以代码最终看起来像这样:

    document.forms.frm[sel][i]

    这是一个有效的fiddle

    另一种方法是让jQuery为你完成工作。为方便起见,请为每个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 ); } } } } 标记添加一个公共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。这是一个updated fiddle