特定下拉框切换时获取隐藏下拉框值并转为单选按钮展示

需求说明 #

当model下拉框切换选中项时，将隐藏的designation下拉框中的选项转换为单选按钮，展示在页面指定区域，同时保证单选按钮与designation的选中状态同步，点击单选按钮时也能更新designation的选中值。

问题修正与完整实现 #

原代码存在几处影响功能的问题：

• model下拉框的id属性拼写错误（ide="model"应为id="model"）
• model下拉框的option属性错误（val应为value）
• 原代码页面加载时就生成单选按钮，未满足“切换model时才展示”的需求

以下是修正后的完整代码：

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<select name="model" id="model">
  <option value="">choose option</option>
  <option value="1.5inces">1.5 inches</option>
</select>

<select id="designation" title="Designation" name="designation" style="display:none">
  <option value="">Choose Option..</option>
  <option value="12">12</option>
  <option value="23">23</option>
</select>

<div id="r"></div>

JavaScript 代码

// 监听model下拉框切换事件
jQuery("#model").on("change", function() {
  // 清空旧的单选按钮，避免重复渲染
  jQuery("#r").empty();
  
  // 遍历隐藏下拉框的选项，生成对应单选按钮
  jQuery("#designation option").each(function(i, e) {
    const radioBtn = jQuery("<input type='radio' name='r' />")
      .attr("value", jQuery(this).val())
      // 让单选按钮默认选中状态与designation当前值一致
      .prop("checked", jQuery(this).val() === jQuery("#designation").val())
      // 点击单选按钮时同步更新隐藏下拉框的值
      .click(function() {
        jQuery("#designation").val(jQuery(this).val());
      });
    
    // 创建标签并关联单选按钮
    const label = jQuery("<label>").text(this.textContent).prepend(radioBtn);
    
    // 将组合好的单选按钮+标签添加到展示区域
    label.appendTo("#r");
  });

  // 可选：查看当前隐藏下拉框的值
  console.log("当前designation的值：", jQuery("#designation").val());
});

实现说明 #

• 切换model时先清空展示区域，避免重复生成单选按钮
• 遍历隐藏下拉框的所有选项，为每个选项生成对应的单选按钮和关联标签
• 单选按钮的初始选中状态与designation的当前值保持同步
• 点击单选按钮时自动更新隐藏下拉框的选中值，确保两者数据一致性

内容的提问来源于stack exchange，提问作者mike