javascript - How jQuery to change a second select list based on the Third select list option and second select based upon first -


why third select option changing based upon second one. when first select selected second 1 changing. while go second third 1 not changing view.

<select name="select1" select="select1">   <option value="">select country</option>   <option value="india">india</option>   <option value="america">america</option> </select> <select name="select2" id="select2">   <option value="">select state</option>   <option data-value="orissa" value="india">orissa</option>   <option data-value="telangan" value="india">telangan</option>   <option data-value="america" value="america">usa</option>   <option data-value="america" value="america">california</option> </select> <select name="select3" id="select3">   <option value="">select city</option>   <option value="orissa">nal</option>   <option value="orissa">mir</option>   <option value="telangan">hyd</option>   <option value="telangan">vija</option>   <option value="america">krk</option>   <option value="america">mrk</option> </select> script <script>   $("#select1").change(function() {     if ($(this).data('options') == undefined) {       $(this).data('options', $('#select2 option').clone());     }     var id = $(this).val();     var options = $(this).data('options').filter('[value=' + id + ']');     $('#select2').html(options);     });   $("#select2").change(function() {   if ($(this).data('options') == undefined) {     $(this).data('options', $('#select3 option').clone());   }   var id = $(this).val();   var options = $(this).data('options').filter('[data-value=' + id + ']');   $('#select3').html(options); }); </script> 

select1 not working since there no id attribute select1 in html.

<!-- change --> <select name="select1" select="select1"> <!-- --> <select name="select1" id="select1"> 

also, there seems mismatch between data-values , values of options.

  1. try keep val actual value of option , data-value predecessor.
  2. both these value case sensitive 'telangan' !== 'telangan'

here's updated version of code:

$("#select1").change(function() {    if ($(this).data('options') == undefined) {      $(this).data('options', $('#select2 option').clone());    }    var id = $(this).val();    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();    var options = $(this).data('options').filter('[data-value=' + id + ']');    $('#select3').html(options).show();  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="display: none;">      <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="america">usa</option>      <option data-value="america" value="america">california</option>  </select>    <select name="select3" id="select3" style="display: none;">      <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="america">krk</option>      <option data-value="america">mrk</option>  </select>


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -