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

【问题标题】：How can I dynamically update the selected option in a hidden select element based on a radio button state using jQuery?如何使用 jQuery 基于单选按钮状态动态更新隐藏选择元素中的选定选项？
【发布时间】：2011-04-03 16:00:38
【问题描述】：

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

所有选定的值都需要以 category[] 的名称 attr 值发布到服务器（这是我正在使用的 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 值作为它们的名称属性值，并且具有与生成它们的选择选项完全相同的值。

为每个选择/收音机对为我们生成这样的 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 元素，只要名称 attr 与 select 的 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>

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

【问题讨论】：

嘿，如果这解决了您的问题，您应该回来接受答案。 :)
没有理由感到奇怪。事实上它的somewhat encouraged :)

标签： jquery forms select checkbox

【解决方案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');
  });

【讨论】：