0

Good morning I'm hoping someone can help me with my query. I'm trying to make this code so that if x is selected it will show another drop down which seems to be working fine, however if I click 3 drop downs deep and select another primary drop down it does not hide the last displayed drop down.

For example:

If you run the code snippet you will see that if you click India then Orissa then Nal - but then change India to America you will still see Nal in the end drop down - it also does the same if you first select America - California - MRK or KRK.

$("#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>

Improve this question
4
  • Would it be okay if you reworded this to be clearer? I'm struggling to follow :) Commented Jul 25, 2017 at 8:54
  • $('#select2').hide() ? Commented Jul 25, 2017 at 8:55
  • Good morning! - If you run the code snippet you will see that if you click India then Orissa then Nal - but then change India to America you will still see Nal in the end drop down - it also does the same if you first select America - California - MRK or KRK - I hope this makes more sense. Commented Jul 25, 2017 at 8:57
  • you need to define action to change your select. that is what you did wrong. or you can simly hide 3rd select on change of first select Commented Jul 25, 2017 at 9:04

5 Answers 5

Reset to default
2

you should trigger second select box when select box 1 changed, i comment out $("#select3").hide(); just for test

$('#select2').trigger('change');

i hope this can help you

$("#select1").change(function() { //$("#select3").hide(); 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(); if($('#select3').is(':visible')) $('#select2').trigger('change'); }); $("#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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Simply .hide() the 3 <select> element on the change event of 1/primary <select> element

$("#select1").change(function () { $('#select3').hide(); //Rest of your code }); 

$("#select1").change(function() { $('#select3').hide(); 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>

Improve this answer

2 Comments

Thank you so much, so simple yet I've been banging my head off a wall all morning. Appreciate the help! :)
@sconner87, Glad I could help
1

Hide the third select box onchange of first select 

$("#select1").change(function() { $('#select3').hide(); .... }); 

$("#select1").change(function() { $('#select3').hide(); 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>

Improve this answer

Comments

1 

$("#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(); }); $("#select1").change(function() { $('#select3').hide(); });
<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>

UPDATE:

$("#select1").change(function() { $('#select3').hide(); });

Improve this answer

Comments

1

One way can be to establish a relationship between the drop downs so that they know each other. This can be achieved by using data-attributes.

Below code will not work in itself. You might have to clean it up & apply. This is to just give an idea of the approach.

<select class="select-elem" name="select1" data-childselect="select2" data-parentselect="" ></select> <select class="select-elem" name="select2" data-childselect="select3" data-parentselect="select1" ></select> <select class="select-elem" name="select3" data-childselect="" data-parentselect="select2" ></select>

and use jquery to hide/show the relevant dropdowns

$(".select-elem").on("click", function () { var p = $(this).data("parentselect"); var c = $(this).data("childselect"); // show the child $("[name=" + c + "]").show(); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.