jQuery shortcut select all on SELECT option

[johnroberts2k]

I have a PHP loop that creates a bunch of select options that look like the following:

<select name="userCode[001][code]">
<option value="">--</option>
<option value="3">A</option>
<option value="4">B</option>
<option value="5">C</option>
<option value="6">#</option>
</select>

The 001 value changes in the select name for every select loop. The option value also can be different. However, the option label (A, B, C, #) are all the same in every select loop.

Can someone kindly help me so that I can use jQuery to select a certain option on all the looped select options. So for exampe maybe something like pressing a shortcut like CTRL & A to select A on all dropdown menus or CTRL & B for B etc.

Any suggestions would be much appreciated.

Thanks

[NickMNS]

I there any particular reason why you want to this with jQuery as oppposed to PHP? This is simply achieved by adding the attribute (selected) or (selected="true") to the option tag that you would like to be seen as selected. It would be more efficient to add the attribute in your PHP loop.

[johnroberts2k]

Yes I wanted to do it with jQuery as I have jQuery loaded in my page already. And to do it with PHP I would have to select which one I want to be selected on all drop-down menus an then reload the page with that information so that the PHP loop can select whatever it is that I selected. I wanted to do it without leaving the page

[johnroberts2k]

I figured it out. I did the following. I created an extra dropdown select option that is used to get the value from that then clone it to all the rest.

Below is what I did:

<script>
$(document).ready(function(){
 $('#shortcut').on('change', function(){
  $("#allCodes option").each(function(){
  if ($(this).text() == $('#shortcut option:selected').text()) {
   $(this).attr('selected',true);
  }
  });
 });
});
</script>


<select name="" id="shortcut">
<option value="">CHOOSE ONE TO SELECT ON ALL</option>
<option value="3">A</option>
<option value="4">B</option>
<option value="5">C</option>
<option value="6">#</option>
</select>



<select name="userCode[001][code]" id="allCodes">
<option value="">--</option>
<option value="3">A</option>
<option value="4">B</option>
<option value="5">C</option>
<option value="6">#</option>
</select>

<select name="userCode[002][code]" id="allCodes">
<option value="">--</option>
<option value="7">A</option>
<option value="8">B</option>
<option value="9">C</option>
<option value="10">#</option>
</select>

<select name="userCode[003][code]" id="allCodes">
<option value="">--</option>
<option value="11">A</option>
<option value="12">B</option>
<option value="13">C</option>
<option value="14">#</option>
</select>

[NickMNS]

I'm glad to see that you found a solution.

One minor suggestion if I may, probably a mistake copying the code here, you have id="allCodes" in three places, the id's must be unique.

[johnroberts2k]

Oh yes thanks for pointing that out. It's not a copying and paste error. But something I didn't think about because I need all the selectors to be identified as one but didn't take into account that the ID value needs to be unique because it was just working. But I guess it's best practice to follow the rules. So instead of id="allCodes" i've changed it to class="allCodes" and in the javascript code I change $("#allCodes option") to $(".allCodes option") this makes the javascript change everything with the class ID instead of everything with the ID