<Select> array element's change event will populate another <Select> element by jQuery

I have 2 array elements. I tried to bind change event to first element so that the select change even will influence second element. Example:

<select name="item1[]" id="item1[]">
  <option value="0">...</option>
  <option value="1">...</option>
  <option value="3">...</option>
</开发者_StackOverflow中文版select>

<select name="item2[]" id="item2[]">
  <option value="0">...</option>
  <option value="1">...</option>
  <option value="3">...</option>
</select>

<select name="item1[]" id="item1[]">
  <option value="0">...</option>
  <option value="1">...</option>
  <option value="3">...</option>
</select>

<select name="item2[]" id="item2[]">
  <option value="0">...</option>
  <option value="1">...</option>
  <option value="3">...</option>
</select>

Accordingly there are more rows with item1 and item2 array element waiting for PHP process.

When item1 select will change then item2 will populate. but my following jquery function do not work even in item1 change event. I could not understand why bind function not working. I tried to use alert but not work.

<script>
$('#item1[]').each(function(index){
  $(this).bind("change", function(){
    another function call to populate item2
    alert($(this).val()); // not working
  });
});
</script>

Please help.

Regards.

The same id should not exist more than once in a document, jquery stops searching for domobjects as soon as it finds one id.

Also, [] is not valid in an id, see W3C

In addition to the comments, you need to escape those square brackets (or remove them from the ID attributes - they are only complicating things, and invalid in HTML 4 as @jensgram points out):

$('#item1\\[\\]')

See http://api.jquery.com/category/selectors/

Not sure why you do such a complicated call, but this should do it:

$('#item1\\[\\]').change(function(){
    alert($(this).val());
});

(provided that you have only one element with that ID).

[] are meta-characters for the attribute selector:

If you wish to use any of the meta-characters (#;&,.+*~':"!^$[]()=>|/@) as a literal part of a name, you must escape the character with two backslashes: \\. For example, if you have an an element with id="foo.bar", you can use the selector $("#foo\\.bar").

And btw if you have the square brackets for PHP, you don't need them in the ID. They only make sense in the name attribute.