Как я могу динамически обновить выбранную опцию в скрытом элементе выбора, основываясь на состоянии переключателя, используя jQuery?

Question

У меня есть n элементов select на html-странице, которые позволяют пользователю выбирать категории.

Все выбранные значения должны быть опубликованы на сервере со значениями имени атрибута category [] (это ограничение CMS, которое я использую), но, как есть вФактически несколько групп категорий, из которых пользователь должен выбрать по одной, при выводе в качестве элементов формы категории распределяются по нескольким выбранным элементам, например, так:

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

, чтобы пользователи могли легко видеть все доступные параметрыв каждой группе я динамически заменяю каждый из этих селекторов группой переключателей, используя jQuery 1.4.Я не могу просто вставить их в html как радиокнопки, потому что идентичное имя attr, требуемое CMS, позволило бы только одну итоговую сумму выбора, когда я хочу один для каждой группы.

Динамически вставленные радиокнопки используют идентификаторЗначение attr для select, из которого они были сгенерированы, в качестве значения имени attr, и имеет те же значения, что и параметры select, из которых они сгенерированы.

Предоставление нам сгенерированного html-кода для каждой пары select / radio:

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

Затем элемент select динамически скрывается, так что видна только радиогруппа.

То, что я хочу сделать (и не могу сработать), относится к каждому элементу select, динамически обновлять выбранную опцию всякий раз, когда проверяется значение переключателя с именем attr, идентичным идентификатору выбранной опции.то есть, чтобы при изменении радиовходов на что-то вроде:

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

мой (скрытый) выбор обновлялся до:

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

Который я могу отправить на сервер,сохраняя исходное имя attr и сохраняя все пользовательские настройки при выборе.

Answer 1

Хорошо, понял, что на самом деле все не так сложно:

  $("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');
  });