CODEWITHSUNDEEP
javascripthtmljquerylaravelhtml-select
Hayrulla Melibayev
Hayrulla Melibayev

Reputation: 532

Filter data from select depending on other select

I have two select items. The first one that have a list of cities.

<select class="form-control" style="width: 100%;" name="city">
  <option value="1" id="vil_1">Qoraqalpog‘iston respublikasi</option>
  <option value="2" id="vil_2">Andijon viloyati</option>
  <option value="3" id="vil_3">Buxoro viloyati</option>
 </select>

The next one has regions list which belongs to cities.

 <select class="form-control" style="width: 100%;" name="region">
     <option value="15" id="reg_15" parent="1">Amudaryo tumani</option>
     <option value="16" id="reg_16" parent="1">Beruniy tumani</option>
     <option value="17" id="reg_17" parent="1">Qorauzoq tumani</option>
     <option value="32" id="reg_32" parent="2">Andijon tumani</option>
     <option value="33" id="reg_33" parent="2">Baliqchi tumani</option>
     <option value="34" id="reg_34" parent="2">Bo`z tumani</option>
  </select>

How can I set set list of second select options which parent id equal to value of selected city in first select?

Upvotes: 1

Views: 2399

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

It's better to send it as , an json object from server side , an render region option on city change , using the sent array ,

but if you still use html rendrerd select , you can hide option that doesn't have same parent id , here I used jquery secipt to show result as follow :

NOTE: use data-parent instead of parent in HTML generation read more html data attibute

Snippet :

$(function() {
  

  // ref to city selector
  var $selectCity = $("select[name='city']");
  // ref to region selector
  var $regionSelect = $("select[name='region']");
  
  // get city startup value
  var cityValue =  $selectCity.val();
  $regionSelect.val("");
  // set selection on region select by hiding options
  $regionSelect.find(`option[data-parent!=${cityValue}]`).hide();

  //change listener to set region option based on city value 
  $selectCity.on("change", function(e) {
    var value = e.target.value;
    $regionSelect.val("");
    $regionSelect.find(`option`).hide(); // hide all
    $regionSelect.find(`option[data-parent=${value}]`).show();

  });



});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" style="width: 100%;" name="city">
  <option value="1" id="vil_1">Qoraqalpog‘iston respublikasi</option>
  <option value="2" id="vil_2">Andijon viloyati</option>
  <option value="3" id="vil_3">Buxoro viloyati</option>
</select>
<br><br> The next one has regions list which belongs to cities.

<select class="form-control" style="width: 100%;" name="region">
  <option value="15" id="reg_15" data-parent="1">Amudaryo tumani</option>
  <option value="16" id="reg_16" data-parent="1">Beruniy tumani</option>
  <option value="17" id="reg_17" data-parent="1">Qorauzoq tumani</option>
  <option value="32" id="reg_32" data-parent="2">Andijon tumani</option>
  <option value="33" id="reg_33" data-parent="2">Baliqchi tumani</option>
  <option value="34" id="reg_34" data-parent="2">Bo`z tumani</option>
</select>

Upvotes: 1

Related Questions