如何使用 jQuery 根据单选按钮状态动态更新隐藏选择元素中的选定选项？

Question

我在 html 页面中有 n 个选择元素，用于允许用户选择类别。

所有选定的值都需要发布到名称属性值为 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 中，因为当我想要每组一个时，CMS 所需的相同名称 attr 只允许总共一个选择。

动态插入的单选按钮使用生成它们的选择的 id attr 值作为其名称属性值，并且与生成它们的选择选项具有完全相同的值。

为每个 select/radio 对提供如下生成的 html：

<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 元素，以便只有 radio 组可见。

我想要做的（并且不能完全解决）是对于每个选择元素，每当名称属性与选择的 id 相同的单选按钮的选中值发生变化时，动态更新所选选项。即，当无线电输入更改为以下内容时：

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

我可以将它们发回服务器，保留原始名称属性并保留所有用户在选择中的选择。

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