State change according to country but City not changed according to the state

Question

3 Dropdowns country,state,city

code

 <script> $(document).ready(function() { $("#item1, #item2").change(function() { var value = $(this).val(); $("#item2").html(options[value]); var value1 =$("#item2").val(); $("#item3").html(options1[value]); }); var options = [ "<option value='test'>IN state-1</option><option value='0'>IN state-2</option>", "<option value='test'>US state-1</option><option value='1'>US state-2</option>", "<option value='test'>UK state-1</option><option value='2'>UK state-2</option>" ]; var options1 = [ "<option value='test'>IN-state -1 city 1</option><option value='1'>IN-state -1 city 1</option>", "<option value='test'>US -state -1 city-1</option><option value='2'>US -state -1 city-2</option>", "<option value='test'>UK -state -1 city-1</option><option value='3'>UK -state -1 city-2</option>"]; }); </script>

 <div class="content-header"> <div class="container-fluid"> <div class="row"> <select id="item1"> <option disabled="disabled" selected="selected">--select--</option> <option value="0">India</option> <option value="1">US</option> <option value="2">UK</option> </select> <select id="item2"> <option value="">-- select one -- </option> </select> <select id="item3"> <option> -- select another one --</option> </select> </div> </div> </div>

Here the state Is change according to the county, but City is not changing according to the state.

*option var=for state

option1 var-for city of state 1...*

Now i want to add cities for state-2 and that cities will be displayed if we select state -2

Final Summry: So basically states change according to the countries, i want to change cities according to the state. I hope you

Answer 1

Following the pattern you have used, below is the solution. Essentially I am filtering the option1 array based on the value of item2 select. Be careful as I have cleared the extra spaces to make the inner HTML of item2 to include part of options that are in item3

 $(document).ready(function() { $("#item1").change(function() { var value = $(this).val(); $("#item2").html(options[value]); $("#item3").html('<option> -- select another one --</option>'); }); $("#item2").change(function() { //var value = $(this).val(); var filteredOptions = []; var innerText = $('#item2 option:selected').html(); filteredOptions = options1.filter(op=> { return op.toLowerCase().includes(innerText.toLowerCase()); }); $("#item3").html(filteredOptions); }); var options = [ "<option value='test'>IN state-1</option><option value='0'>IN state-2</option>", "<option value='test'>US state-1</option><option value='1'>US state-2</option>", "<option value='test'>UK state-1</option><option value='2'>UK state-2</option>" ]; var options1 = [ "<option value='test'>IN state-1 city 1</option><option value='1'>IN state-1 city 1</option>", "<option value='test'>IN state-2 city 1</option><option value='1'>IN state-2 city 1</option>", "<option value='test'>US state-1 city-1</option><option value='2'>US state-1 city-2</option>", "<option value='test'>UK state -1 city-1</option><option value='3'>UK state -1 city-2</option>"]; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content-header"> <div class="container-fluid"> <div class="row"> <select id="item1"> <option disabled="disabled" selected="selected">--select--</option> <option value="0">India</option> <option value="1">US</option> <option value="2">UK</option> </select> <select id="item2"> <option value="">-- select one -- </option> </select> <select id="item3"> <option> -- select another one --</option> </select> </div> </div> </div>

There should be a better way to do this using different variables for each selected value. But since your code is structured as such, I have tried to make minimal changes