我需要使用此代码在 #city 中保留默认选项

Question

在寻找级联下拉菜单时，我在这里找到了这段代码，它对我来说几乎是完美的，但我需要在更改 select-menu 中的值后保留默认选项第一个.

function filterCity() {
  var province = $("#province").find('option:selected').text(); // stores province
  $("#option-container").children().appendTo("#city"); // moves <option> contained in #option-container back to their <select>
  var toMove = $("#city").children("[data-province!='" + province + "']"); // selects city elements to move out
  toMove.appendTo("#option-container"); // moves city elements in #option-container
  $("#city").removeAttr("disabled"); // enables select
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="province" onchange="filterCity();">
  <option value="1">RM</option>
  <option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
  <option>SELECT CITY</option>
  <option data-province="RM" value="1">ROMA</option>
  <option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
  <option data-province="FI" value="3">FIRENZE</option>
  <option data-province="FI" value="4">PONTASSIEVE</option>
</select>

<span id="option-container" style="visibility: hidden; position:absolute;"></span>

Answer 1

你可以试试这个代码。

<select class="select" id="province">
  <option value="1">RM</option>
  <option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
  <option data-province="DEF">SELECT CITY</option>
  <option data-province="RM" value="1">ROMA</option>
  <option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
  <option data-province="FI" value="3">FIRENZE</option>
  <option data-province="FI" value="4">PONTASSIEVE</option>
</select>    
<span id="option-container" style="visibility: hidden; position:absolute;"></span>

<script>
    $('#province').on('change', function() {
        var province = $("#province").find('option:selected').text();     
        $("#city option[data-province!='" + province + "']").hide();
        $("#city option[data-province='" + province + "']").show();
        $("#city option[data-province='DEF'").show().prop('selected', true);
        $("#city").removeAttr("disabled");
    });
</script>

https://jsfiddle.net/sg0t23bc/5/

我需要使用此代码在 #city 中保留默认选项

I need to keep the default option in #city with this code

javascript

jquery

html-select

cascadingdropdown