How to reference #id elements in jquery that are arrays

Question

I have a script that produces id's that look like array elements as follows:

<select name="serviceTypeID[1]" id="serviceTypeID[1]" ...
<select name="serviceTypeID[2]" id="serviceTypeID[2]" ... 
<select name="serviceTypeID[3]" id="serviceTypeID[3]" ...
<select name="serviceTypeID[4]" id="serviceTypeID[4]" ...
and so on up to 10 currently...

How can I code my jquery script to reference them? This code does not work.

$('#serviceTypeID[1],#serviceTypeID[2],#serviceTypeID[3],#serviceTypeID[4]').change(function() {

  var first = parseInt( $('#firstService[1]').val() );
  var second = parseInt( $('#secondService[1]').val() );
  var third = parseInt( $('#thirdService[1]').val() );
  if (isNaN(first)) first = 0;
  if (isNaN(second)) second = 0;
  if (isNaN(third)) third = 0;

  $('#serviceTotal[1]').val( ( first + second + third + ' Total') );

  first = parseInt( $('#firstService[2]').val() );
  second = parseInt( $('#secondService[2]').val() );
  third = parseInt( $('#thirdService[2]').val() );
  if (isNaN(first)) first = 0;
  if (isNaN(second)) second = 0;
  if (isNaN(third)) third = 0;

  $('#serviceTotal[2]').val( ( first + second + third + ' Total') );

  first = parseInt( $('#firstService[3]').val() );
  second = parseInt( $('#secondService[3]').val() );
  third = parseInt( $('#thirdService[3]').val() );
  if (isNaN(first)) first = 0;
  if (isNaN(second)) second = 0;
  if (isNaN(third)) third = 0;

  $('#serviceTotal[3]').val( ( first + second + third + ' Total') );

  first = parseInt( $('#firstService[4]').val() );
  second = parseInt( $('#secondService[4]').val() );
  third = parseInt( $('#thirdService[4]').val() );
  if (isNaN(first)) first = 0;
  if (isNaN(second)) second = 0;
  if (isNaN(third)) third = 0;

  $('#serviceTotal[4]').val( ( first + second + third + ' Total') );

//and so on up to 10 currently

});

Nothing is returning from the jquery script so I feel that I am referencing it wrong in my jquery. Thanks

Yep, that's exactly it @dfsq -- just test it and it solved the problem. Thanks — H. Ferrence, Mar 29 '14 at 21:26
You probably shouldn't have sequential IDs to begin with, try using a backing array instead. — Benjamin Gruenbaum, Mar 29 '14 at 21:31

score 0 · Answer 1 · answered Mar 29 '14 at 21:26

0

I would wrap a div or another element around all those and use event delegation http://api.jquery.com/on/

Eg.

say you wrapped a div around those and gave that div an id of "foo". $('#foo').on('change','select'),function(){ console.log(this); });

answered Mar 29 '14 at 21:26

Alistair Laing

983
1
7
18

Unfortunately, I can't @AlistairLaing. I am using a plugin that tightly controls the output and renders the ID's this way. I can't dig into the source without eliminating the future possibility of keeping current with the O/S plugin – H. Ferrence Mar 29 '14 at 21:29

score 0 · Accepted Answer · answered Mar 29 '14 at 22:11

0

You should just remove the square brackets from the id they are uncanny...

<select name="serviceTypeID[1]" id="serviceTypeID1" ...
<select name="serviceTypeID[2]" id="serviceTypeID2" ... 
<select name="serviceTypeID[3]" id="serviceTypeID3" ...
<select name="serviceTypeID[4]" id="serviceTypeID4" ...

answered Mar 29 '14 at 22:11

Wilmer

2,511
1
14
8

Unfortunately, I can't @Wilmer. I am using a plugin that tightly controls the output and renders the ID's this way. I can't dig into the source without eliminating the future possibility of keeping current with the O/S plugin – H. Ferrence Mar 30 '14 at 00:54

How to reference #id elements in jquery that are arrays

2 Answers2