下拉选择列表优化：默认提示显示与联动重置问题

• 选择Country（select1）后，State（select2）需默认显示“Select State”而非直接展示选项；选择State（select2）后，City（select3）需默认显示“Select City”而非直接展示选项。
• 当已选中的State（select2）被取消选择或切换为其他州时，City（select3）需重置为显示“Select City”；同理，当已选中的Country被取消选择或切换为其他国家时，State（select2）需重置为显示“Select State”，同时City（select3）也要重置为“Select City”。

当前代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="select1" id="select1">
  <option value="">Select Country</option>
  <option value="india">India</option>
  <option value="america">America</option>
</select>

<select name="select2" id="select2" style="inline">
  <option value="">Select State</option>
  <option data-value="india" value="orissa">Orissa</option>
  <option data-value="india" value="telangan">Telangan</option>
  <option data-value="america" value="usa">USA</option>
  <option data-value="america" value="america">California</option>
</select>

<select name="select3" id="select3" style="inline">
  <option value="">Select city</option>
  <option data-value="orissa">Nal</option>
  <option data-value="orissa">Mir</option>
  <option data-value="telangan">Hyd</option>
  <option data-value="telangan">Vija</option>
  <option data-value="usa">ttt</option>
  <option data-value="usa">ttt</option>
  <option data-value="america">KRK</option>
  <option data-value="america">MRK</option>
</select>

JavaScript #

$(function() {
  $("#select1").change(function() {
    if ($(this).data('options') == undefined) {
      $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    if (id == "") {
      $('#select2').val('');
      $('#select3').val('');
      return;
    }
    var options = $(this).data('options').filter('[data-value=' + id + ']');
    $('#select2').html(options).show();
  });

  $("#select2").change(function() {
    if ($(this).data('options') == undefined) {
      $(this).data('options', $('#select3 option').clone());
    }
    var id = $(this).val();
    if (id == "") {
      $('#select3').val('');
      return;
    }
    var options = $(this).data('options').filter('[data-value=' + id + ']');
    $('#select3').html(options).show();
  });
});

解决方案 #

修改后的JavaScript代码 #

$(function() {
  // 提前保存所有原始选项，避免重复克隆
  $("#select1").data('options', $('#select2 option').clone());
  $("#select2").data('options', $('#select3 option').clone());

  $("#select1").change(function() {
    var selectedCountry = $(this).val();
    var allStateOptions = $("#select1").data('options');
    
    if (selectedCountry === "") {
      // 重置State为所有原始选项并选中默认值
      $('#select2').html(allStateOptions).val('');
      // 重置City为所有原始选项并选中默认值
      $('#select3').html($("#select2").data('options')).val('');
      return;
    }
    
    // 筛选对应国家的州选项，拼接默认的Select State选项
    var filteredStates = allStateOptions.filter('[data-value=' + selectedCountry + ']');
    $('#select2').html($('<option value="">Select State</option>').add(filteredStates)).val('');
    // 重置City为仅显示默认提示
    $('#select3').html('<option value="">Select City</option>').val('');
  });

  $("#select2").change(function() {
    var selectedState = $(this).val();
    var allCityOptions = $("#select2").data('options');
    
    if (selectedState === "") {
      // 重置City为所有原始选项并选中默认值
      $('#select3').html(allCityOptions).val('');
      return;
    }
    
    // 筛选对应州的城市选项，拼接默认的Select City选项
    var filteredCities = allCityOptions.filter('[data-value=' + selectedState + ']');
    $('#select3').html($('<option value="">Select City</option>').add(filteredCities)).val('');
  });
});

修改要点 #

1. 保留默认提示选项：每次筛选下级选项时，手动添加“Select State”/“Select City”默认选项，并设置选中值为空，确保默认显示提示文本。
2. 完善层级重置逻辑：
   • 切换或取消Country选择时，恢复State的所有原始选项并重置选中状态，同时重置City的选项和选中状态。
   • 切换或取消State选择时，恢复City的所有原始选项并重置选中状态。
3. 优化性能：提前在初始化阶段保存所有原始选项，避免每次触发change事件时重复克隆DOM元素。

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