如何根据前一下拉菜单选中值联动填充后续Chosen下拉菜单？

我帮你把这个联动下拉菜单的实现方案整理好了，完全符合你的需求——从JSON数据加载选项，第一个下拉选完后第二个自动过滤出关联项，直接就能用：

实现思路 #

• 页面加载完成后，从JSON的Agencies数组初始化第一个机构下拉菜单
• 监听第一个下拉的change事件，触发第二个地区下拉的筛选逻辑
• 根据选中的机构编号，过滤出Districts数组中DISTAEA匹配的项，动态更新第二个下拉
• 每次修改下拉选项后重新初始化Chosen插件，保证样式和功能同步生效

HTML代码 #

<!-- 引入依赖资源 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 表单结构 -->
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group">
    <label for="frm_agency">选择机构</label>
    <select id="frm_agency" class="agencies-menu form-control" multiple>
      <!-- 动态填充选项 -->
    </select>
  </div>
  <div class="form-group">
    <label for="frm_district">选择地区</label>
    <select id="frm_district" class="form-control" disabled multiple>
      <!-- 动态填充关联选项 -->
    </select>
  </div>
</form>

JavaScript代码 #

// 模拟从JSON文件获取的数据源
var appData = {
  "Agencies": [
    { "AEANAME": "Out of State", "AEANUMBER": "00" },
    { "AEANAME": "AEA 1", "AEANUMBER": "01" },
    { "AEANAME": "AEA 7", "AEANUMBER": "07" },
    { "AEANAME": "AEA 8", "AEANUMBER": "08" },
    { "AEANAME": "AEA 9", "AEANUMBER": "09" },
    { "AEANAME": "AEA 10", "AEANUMBER": "10" }
  ],
  "Districts": [
    { "DISTNAME": "Out of USA", "DISTNUMBER": "0000", "DISTAEA": "00" },
    { "DISTNAME": "Alabama", "DISTNUMBER": "0001", "DISTAEA": "10" },
    { "DISTNAME": "Arizona", "DISTNUMBER": "0002", "DISTAEA": "08" },
    { "DISTNAME": "Arkansas", "DISTNUMBER": "0003", "DISTAEA": "00" },
    { "DISTNAME": "California", "DISTNUMBER": "0004", "DISTAEA": "00" },
    { "DISTNAME": "Colorado", "DISTNUMBER": "0005", "DISTAEA": "00" },
    { "DISTNAME": "Connecticut", "DISTNUMBER": "0006", "DISTAEA": "09" },
    { "DISTNAME": "District Of Columbia", "DISTNUMBER": "0007", "DISTAEA": "09" },
    { "DISTNAME": "Delaware", "DISTNUMBER": "0008", "DISTAEA": "10" },
    { "DISTNAME": "AGWSR Community School District", "DISTNUMBER": "0009", "DISTAEA": "01" },
    { "DISTNAME": "Florida", "DISTNUMBER": "0010", "DISTAEA": "08" },
    { "DISTNAME": "Georgia", "DISTNUMBER": "0011", "DISTAEA": "00" },
    { "DISTNAME": "Idaho", "DISTNUMBER": "0012", "DISTAEA": "00" },
    { "DISTNAME": "Illinois", "DISTNUMBER": "0013", "DISTAEA": "00" },
    { "DISTNAME": "Indiana", "DISTNUMBER": "0014", "DISTAEA": "00" },
    { "DISTNAME": "Kansas", "DISTNUMBER": "0015", "DISTAEA": "00" },
    { "DISTNAME": "Kentucky", "DISTNUMBER": "0016", "DISTAEA": "00" },
    { "DISTNAME": "Louisiana", "DISTNUMBER": "0017", "DISTAEA": "00" },
    { "DISTNAME": "Adair-Casey Comm School District", "DISTNUMBER": "0018", "DISTAEA": "11" },
    { "DISTNAME": "Massachusetts", "DISTNUMBER": "0019", "DISTAEA": "00" },
    { "DISTNAME": "Maryland", "DISTNUMBER": "0020", "DISTAEA": "10" },
    { "DISTNAME": "Maine", "DISTNUMBER": "0021", "DISTAEA": "08" },
    { "DISTNAME": "Michigan", "DISTNUMBER": "0022", "DISTAEA": "08" },
    { "DISTNAME": "Minnesota", "DISTNUMBER": "0023", "DISTAEA": "01" },
    { "DISTNAME": "Missouri", "DISTNUMBER": "0024", "DISTAEA": "09" },
    { "DISTNAME": "Mississippi", "DISTNUMBER": "0025", "DISTAEA": "09" },
    { "DISTNAME": "Montana", "DISTNUMBER": "0026", "DISTAEA": "10" }
  ]
};

$(document).ready(function() {
  var agencyMenu = $('.agencies-menu');
  // 清空下拉后填充机构选项
  agencyMenu.empty();
  $.each(appData.Agencies, function(key, value) {
    agencyMenu.append(
      $("<option></option>")
        .val(value.AEANUMBER)
        .text(`(${value.AEANUMBER}) ${value.AEANAME}`)
    );
  });
  // 初始化Chosen插件
  agencyMenu.chosen({width: "100%"});
});

// 监听机构下拉的变化，更新地区下拉
$('#frm_agency').on('change', feedDistricts);

function feedDistricts() {
  var selectedAgencies = $(this).val(),
      districtMenu = $('#frm_district');
  
  // 根据选中状态启用/禁用地区下拉
  districtMenu.attr('disabled', !selectedAgencies || selectedAgencies.length === 0);
  
  if (selectedAgencies && selectedAgencies.length > 0) {
    // 先清空现有选项，避免重复添加
    districtMenu.empty();
    // 筛选并添加匹配的地区选项
    $.each(appData.Districts, function(key, value) {
      if ($.inArray(value.DISTAEA, selectedAgencies) !== -1) {
        districtMenu.append(
          $("<option></option>")
            .attr('data-aea', value.DISTAEA)
            .val(value.DISTNUMBER)
            .text(`(${value.DISTAEA}) ${value.DISTNAME}`)
        );
      }
    });
  } else {
    // 未选中机构时清空地区下拉
    districtMenu.empty();
  }
  // 重新初始化Chosen，确保样式同步
  districtMenu.chosen({width: "100%"});
}

关键细节说明 #

• 高效更新：修改了原代码的逻辑，每次更新地区下拉时先清空再添加，避免重复选项和不必要的DOM操作
• 状态控制：自动根据第一个下拉的选中状态启用/禁用第二个下拉，提升用户体验
• Chosen同步：每次修改下拉选项后必须重新调用chosen()，否则Chosen的样式和搜索功能不会同步更新

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