我想建立一個具有搜索功能的依賴下拉菜單(我用搜索功能選擇)。如果從第一個下拉列表中選擇了任何國家，第二個下拉列表應反映與第一個選擇相關的更新選擇。

示例:如果在第一個下拉列表中選擇了印度，第二個下拉列表應該有& quot古爾岡、欽奈、班加羅爾& quot

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

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

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

function myFunction() {
  console.log(document.getElementById("dropdown1").value)
}

function dependentDropdown() {
  var $countriesDropdown = $("#dropdown1"),
    $citiesDropdown = $("#dropdown2");
  
  $countriesDropdown.on("change", function() {
    var _rel = $(this).val();
    console.log(_rel);
    
    $citiesDropdown.find("option").attr("style", "");
    $citiesDropdown.val("");
    
    if (!_rel) return $citiesDropdown.prop("disabled", true);
    
    $citiesDropdown.find("[rel~='" + _rel + "']").show();
    $citiesDropdown.prop("disabled", false);
  });
}

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

.dp {
  margin: 10px;
}

<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"  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet"  />

<p>Select a value from the list:</p>

<div class="whole-container">
  <div class="dp">
    <select id="dropdown1" class="dropdown1" name="dropdown1" multiple="false" style="width: 200px;">
      <option value="india">india</option>
      <option value="usa">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">gurgaon</option>
      <option rel="india" value="chennai">chennai</option>
      <option rel="india" value="bangalore">bangalore</option>
      <option rel="usa" value="waltham">waltham</option>
      <option rel="usa" value="chicago">chicago </option>
      <option rel="usa" value="wasgington d c">washington d c</option>
    </select>
  </div>
</div>