Loop Through Identical Multiple Select Drop Downs With Javascript

Question

How can one iteratively loop through identical form elements to determine which items in the select multiple have been designated?

I need to be able to determine which selection box I'm operating on and then find all of the entries from that box that user has chosen. The number of selects on the page varies - it is built up on the server side from information in the dB.

The values are dummied up, but this could be something like 10 different activities for each day in a month. The user can select from zero to all on each day then process the values.

There are comments in the code regarding the specific point of the problem that I'm facing.

Alternatives such as processing each select with form refreshes isn't viable. All of the information needs to be entered on a single page then processed at once as an entire data set. I am open to a solution that uses some tool set like jQuery or Angular if such a solution exists.

I've tried to use a built up variable to point to the array index and I've tried copying the object to a local array which works well for stepping through them, but then I lose the .selected attribute. I've searched this site and the web in general, but I haven't found a reference to this problem.

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

Michael Geary · Accepted Answer · 2013-09-24 06:25:52Z

You're really pretty close on that. I only had to change a few things to get it working:

Your select elements are named s_1 and s_2, but your outer loop counts from 0 through 1, not 1 through 2.
Where you have document.forms.frm.s_1[i] you can use document.forms.frm[sel][i] to reference the select element for the current loop iteration.
Even better, instead of using document.getElementById(sel) in one place and document.forms.frm[sel][i] in another, you can save the first reference and use it in both places. That also makes the code more clear, instead of using two very different ways to get to the same element.

So the code ends up looking like this:

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 );
            }
        }
    }
}

And here's a working fiddle.

Another approach would be to let jQuery do the work for you. To make it easier, add a common class to each of the select tags. For example, I added class="selects" to them and then this very simple version of your procSel() function works:

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 );
        });
    });
}

Note that you don't need to pass elCount into procSel() either. Here's an updated fiddle.

Well done. This is the syntax - frm[sel][i] - that I could not find. Thanks for the assistance.

Collectives™ on Stack Overflow

Loop Through Identical Multiple Select Drop Downs With Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related