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

Question

Looking for a cascading dropdown i found this piece of code here, which is working almost perfect for me, but i need to keep the default option in the second select-menu after changing the value in the first one.

https://stackoverflow.com/a/28902561/10391817

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>

Why don't you simply have 2 dropdown? then hide/show just the relevant one? — Olian04, Aug 11 '19 at 22:05

BCM · Accepted Answer · 2019-08-11T23:02:24.987

You can try this code.

<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/

Thank you for your help. This got me on the right way. Just added a default option in the #province list and a condition, if someone selects the default option after selecting an option in the list. — Wortberge, Aug 12 '19 at 08:54

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

1 Answers1