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.
- try keep
val
actual value of option ,data-value
predecessor. - 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
Post a Comment