HTML Select联动代码修正：需提交分类与子分类ID

核心调整点 #

• 给主分类选择器添加name属性，确保表单能提交category id
• 子分类选项新增data-id存储子分类id，保留原value用于其他业务
• 新增隐藏input，同步子分类选中的id用于表单提交
• 修复联动逻辑，克隆optgroup避免原数据丢失

完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    // 克隆所有optgroup存起来，避免原元素被移走后丢失
    var $optgroups = $('#subcategory > optgroup').clone();

    // 主分类切换联动子分类
    $("#category").on("change",function(){
      var selectedRole = $(this).find('option:selected').data('role');
      // 过滤出对应optgroup并克隆插入，保留原数据
      $('#subcategory').html($optgroups.filter('[label="'+selectedRole+'"]').clone());
      // 切换后触发一次子分类变化，更新隐藏input
      $('#subcategory').trigger('change');
    });

    // 子分类选择时，更新隐藏input的值
    $("#subcategory").on("change",function(){
      var selectedSubId = $(this).find('option:selected').data('id');
      $('#subcategory_id').val(selectedSubId);
    });

    // 页面加载时初始化子分类和隐藏input
    $("#category").trigger('change');
  });
</script>

<form>
  <!-- 主分类：name属性确保提交category id，value已为id -->
  <select id="category" name="category_id">
    <option value="1" data-role="Fashion">Fashion</option>
    <option value="2" data-role="Electronics">Electronics</option>
  </select>

  <!-- 子分类：保留原value用于其他业务，data-id存提交用的id -->
  <select id="subcategory">
    <optgroup label="Fashion">
      <option value="Men's wear" data-id="101">Men's wear</option>
      <option value="Women's wear" data-id="102">Women's wear</option>
    </optgroup>
    <optgroup label="Electronics">
      <option value="Television" data-id="201">Television</option>
      <option value="Game Console" data-id="202">Game Console</option>
    </optgroup>
  </select>

  <!-- 隐藏input，用于提交子分类id -->
  <input type="hidden" name="subcategory_id" id="subcategory_id" value="">
</form>

说明 #

1. 主分类提交：通过给select添加name="category_id"，表单提交时会自动带上选中项的value（即category id）
2. 子分类提交：利用data-id存储需要提交的子分类id，通过隐藏inputsubcategory_id同步选中值，既保留了原value的业务用途，又能提交id
3. 联动逻辑修复：使用clone()复制optgroup，避免原DOM元素被移除后再次切换主分类时找不到对应数据
4. 初始化处理：页面加载时触发主分类的change事件，确保子分类和隐藏input初始值正确

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