Question

I have n number of select elements in an html page that are used to allow the user to select categories.

All of the selected values need to get posted to the server with name attr values of category[] (this a restriction of the CMS I’m using), but as there are in fact multiple groups of categories from which the user must choose one each, when output as form elements the categories are split across multiple select elements like so:

<select name="category[]" id="price">         
   <option value="1">Under £30</option> 
   <option value="2">£30-50</option> 
   <option value="3">£50-100</option> 
</select>

<select name="category[]" id="colour">         
   <option value="4">Red</option> 
   <option value="5">Green</option> 
   <option value="6">Blue</option> 
</select>

So that users can easily see all of the options available in each group, I am dynamically replacing each of these selects with a group of radio buttons using jQuery 1.4. I can’t just insert them into the html as radio buttons because the identical name attr required by the CMS would then only allow one selection total when I want one per group.

The dynamically inserted radio buttons use the id attr value of the select that they were generated from as their name attr value, and have exactly the same values as the select options they are generated from.

Giving us generated html like this for each select/radio pair:

<input value="1" name="cat_price" type="radio"><label>Under £30</label>
<input value="2" name="cat_price" type="radio"><label>£30-50</label>
<input value="3" name="cat_price" type="radio"><label>£50-100</label>

<select name="category[]" id="price">         
   <option value="1">Under £30</option> 
   <option value="2">£30-50</option> 
   <option value="3">£50-100</option> 
</select>

The select element is then hidden dynamically so that only the radio group is visible.

What I want to do (and can’t quite work out) is for each select element, dynamically update the selected option whenever the checked value of the radio button with a name attr identical to the id of the select changes. ie so that when the radio inputs get changed to something like:

<input value="1" name="cat_price" type="radio"><label>Under £30</label>
<input value="2" name="cat_price" type="radio" checked="checked"><label>£30-50</label>
<input value="3" name="cat_price" type="radio"><label>£50-100</label>

my (hidden) select gets updated to:

<select name="category[]" id="price">
   <option value="1">Under £30</option> 
   <option value="2" selected="selected">£30-50</option> 
   <option value="3">£50-100</option> 
</select>

Which I can them post back to the server, preserving the original name attr and keeping all user choices across selects.

Answer 1

Okay, figured out this wasn’t actually so tricky:

  $("input[type='radio']").change(function() {
    var name = $(this).attr('name');
    var value = $(this).attr('value');   
    //find the select with an id that matched the input name attr and the option within it with the same value.
    $("select[id=" + name + "] option[value=" + value + "]").attr('selected', 'selected');
  });