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

Question

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

Is it a typo that both elements have ID item1[]? IDs have to be unique! — Felix Kling
– Felix Kling, Commented Nov 26, 2010 at 12:53
Besides being unique, [] isn't valid...or really appropriate (IMO) for an ID (.e.g. your current issue with escaping), why not have the ID just be item1? — Nick Craver
– Nick Craver, Commented Nov 26, 2010 at 12:55
@Nick Craver You're quite right: "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")." ( source ) — jensgram
– jensgram, Commented Nov 26, 2010 at 12:58

red-X · Accepted Answer · 2010-11-26 12:55:15Z

1

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

answered Nov 26, 2010 at 12:55

red-X

5,1281 gold badge28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

karim79 · Accepted Answer · 2010-11-26 13:01:52Z

1

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/

edited Nov 26, 2010 at 13:01

answered Nov 26, 2010 at 12:54

karim79

343k67 gold badges420 silver badges409 bronze badges

4 Comments

Iqbal Over a year ago

Thank you very much bro. Would you help me little bit more. How can I determine item2 index when item1 will change. Because of if the item[1] change then only item2[1] will populate not other item2[..]

jensgram Over a year ago

"... they are only complicating things" And invalid, too.

jensgram Over a year ago

About the invalid thing; sorry not to mention that the link covers HTML4. HTML5 seems to accept anything but whitespaces.

karim79 Over a year ago

@Iqbal - I think you will need to paste the rest of your implementation into the question.

Felix Kling · Accepted Answer · 2010-11-26 12:54:54Z

0

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.

answered Nov 26, 2010 at 12:54

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

2 Comments

Iqbal Over a year ago

Yes bro Felix. I need to keep it for PHP. I noticed that ID is not needed. Now my problem is to populate the same indexed item2[same index of item1] by mysql data.

Felix Kling Over a year ago

@Iqbal: How are they positioned in your HTML? Does the item2 always follow directly the corresponding item1? (i.e. is item2 the next sibling of item1?)

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related