Question

I have an array of select boxes which are added programmatically. Their names are “array-ified” (see below).

<select name="blah[]">
    <option value="A">A</option>
    <option value="B">B</option>
</select>
<select name="blah[]">
    <option value="A">A</option>
    <option value="B">B</option>
</select>
<!-- and more... -->

When each is added, I want to add an onChange which will examine its selection. If the selection value is “A”, then all of the blah[] selects above it will be set to “A”. If the selection value is “B”, then all of the blah[] selects below will be set to “B”.

Any idea on how to do this, other than by setting the names manually when I add the fields programmatically (“blah1”, “blah2”, etc…)? Can jQuery get the index of each element somehow?

Thanks!

Answer 1

.index() should do the trick

$('select').live('change', function() {
    var index = $('select').index(this);
    $('select').each(function(i) {
        if ( i < index ) {
            // do something to ones above
        }
        else ( i > index ) {
            // do something to ones below
        }
    });
});