从属性获取值并联动更新下拉菜单问题求助

核心思路 #

因为是动态生成的输入行，必须用事件委托绑定产品下拉的change事件，避免动态添加的元素无法触发事件；选中产品后提取允许的仓库ID数组，再遍历对应仓库下拉的选项，只显示匹配ID的项。

完整实现代码 #

HTML结构示例（动态行模板）

<!-- 初始行 -->
<div class="input-row">
  <select name="select_product[]">
    <option value="">选择产品</option>
    <option value="1" data-wh="1,2,6">产品A</option>
    <option value="2" data-wh="3,6">产品B</option>
  </select>
  <select name="warehouse[]">
    <option value="1">仓库1</option>
    <option value="2">仓库2</option>
    <option value="3">仓库3</option>
    <option value="6">仓库6</option>
  </select>
</div>

<!-- 动态添加按钮 -->
<button id="add-row">添加新行</button>

jQuery代码

$(document).ready(function() {
  // 事件委托：监听所有产品下拉的change事件（包括动态添加的）
  $(document).on('change', '[name="select_product[]"]', function() {
    var $productSelect = $(this);
    // 获取当前选中产品允许的仓库ID数组
    var selectedWhIds = $productSelect.find('option:selected').data('wh');
    var allowedWhIds = selectedWhIds ? selectedWhIds.split(',').map(id => id.trim()) : [];
    
    // 找到当前行对应的仓库下拉
    var $warehouseSelect = $productSelect.closest('.input-row').find('[name="warehouse[]"]');
    
    // 遍历仓库选项，显示匹配项，隐藏其他
    $warehouseSelect.find('option').each(function() {
      var optionWhId = $(this).val();
      if (allowedWhIds.includes(optionWhId)) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
    
    // 重置仓库下拉选中状态为第一个可见选项
    $warehouseSelect.val($warehouseSelect.find('option:visible').first().val());
  });

  // 动态添加新行的示例代码
  $('#add-row').click(function() {
    var newRow = $('.input-row').first().clone();
    // 清空新行的选中状态
    newRow.find('select').val('');
    // 添加到页面
    $(this).before(newRow);
  });

  // 页面加载时，对已选中产品的行执行一次过滤
  $('[name="select_product[]"]').each(function() {
    if ($(this).val()) {
      $(this).trigger('change');
    }
  });
});

关键注意点 #

• 事件委托必须绑定到静态父元素（这里用了document，也可以用所有输入行的共同父容器），确保动态添加的行能触发事件。
• data-wh的ID要和仓库下拉的value值完全匹配（包括字符串/数字类型），如果仓库ID是数字，可在转换数组时转为数字：map(id => parseInt(id.trim(), 10))，同时仓库option的value也要是数字格式。
• 动态添加行时，记得清空克隆行的选中状态，避免继承原行的选择。

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