如何使用Chosen构建带搜索功能的关联下拉选择器？

需求：基于Chosen组件构建关联下拉选择器，第一个下拉选择国家后，第二个下拉自动加载对应城市选项，且两个下拉均支持搜索功能。例如选择「印度」时，第二个下拉仅显示「古尔冈、金奈、班加罗尔」。

完整代码实现 #

HTML 结构 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />

<p>请从列表中选择：</p>

<div class="whole-container">
  <div class="dp">
    <select id="dropdown1" class="dropdown1" name="dropdown1" multiple="false" style="width: 200px;">
      <option value="india">印度</option>
      <option value="usa">美国</option>
    </select>
  </div>
  
  <div class="dp">
    <select name="dropdown2" class="dropdown2" id="dropdown2" multiple="false" style="width: 200px;" disabled="disabled">
      <option rel="india" value="gurgaon">古尔冈</option>
      <option rel="india" value="chennai">金奈</option>
      <option rel="india" value="bangalore">班加罗尔</option>
      <option rel="usa" value="waltham">沃尔瑟姆</option>
      <option rel="usa" value="chicago">芝加哥</option>
      <option rel="usa" value="washington-dc">华盛顿特区</option>
    </select>
  </div>
</div>

CSS 样式 #

.whole-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  width: 100%;
}

.dp {
  margin: 10px;
}

JavaScript 逻辑 #

// 初始化Chosen组件，开启搜索及选择数量限制
$(".dropdown1").chosen({
  maximumSelectionLength: 2,
  max_selected_options: 5
});

$(".dropdown2").chosen({
  maximumSelectionLength: 2,
  max_selected_options: 5
});

$(document).ready(() => {
  $('.dropdown1').on('change', dependentDropdown);
});

function dependentDropdown() {
  const $countriesDropdown = $("#dropdown1"),
        $citiesDropdown = $("#dropdown2"),
        chosenInstance = $citiesDropdown.data('chosen');
  
  const selectedCountry = $countriesDropdown.val();
  
  // 重置城市下拉的选中状态与选项显示
  $citiesDropdown.val("");
  $citiesDropdown.find("option").hide();
  
  if (!selectedCountry) {
    $citiesDropdown.prop("disabled", true);
  } else {
    // 显示对应国家的城市选项
    $citiesDropdown.find(`[rel~='${selectedCountry}']`).show();
    $citiesDropdown.prop("disabled", false);
  }
  
  // 强制更新Chosen组件，同步原生select的变更到UI
  chosenInstance?.trigger("chosen:updated");
}

核心要点说明 #

1. Chosen组件特性：自动为下拉框添加搜索功能，通过配置参数限制最大选择数量。
2. 关联逻辑核心：监听国家下拉的change事件，根据选中值筛选城市选项；由于Chosen会生成独立的UI结构，必须调用chosen:updated才能让组件同步原生select的变更。
3. 状态控制：切换国家时重置城市下拉的选中值与禁用状态，确保每次选择都是干净的初始状态。

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