如何使用“更改” jQuery 2.1.4显示选择标签？

Question

I am trying to display select box when user input some values in the textbox , I tried using onchange property of jquery but its not working.

Below is my code

 $(document).ready(function() { $("#total_enter").change(function() { $(".gst_sel_wrap").css("display", "block"); }); }) 

 .gst_sel_wrap { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap_box"> <input type="text" name="total_enter" id="total_enter"> <select class="gst_sel_wrap"> <option>GST SLABS</option> <option value="">0%</option> <option value="">5%</option> <option value="">12%</option> <option value="">18%</option> <option value="">28%</option> </select> </div> 

Answer 1

Try using the jQuery keydown method: https://api.jquery.com/keydown/

I also added some code to hide the dropdown in the beginning, so the effect becomes obvious.

 $(document).ready(function(){ $(".gst_sel_wrap").hide(); $("#total_enter").keydown(function(){ $(".gst_sel_wrap").show(); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap_box"> <input type="text" name="total_enter" id="total_enter"> <select class="gst_sel_wrap"> <option>GST SLABS</option> <option value="">0%</option> <option value="">5%</option> <option value="">12%</option> <option value="">18%</option> <option value="">28%</option> </select> </div> 

Answer 2

You can use either keyup or keydown or both as I do here:

 $(document).ready(function() { $("#total_enter").on("keyup keydown",function() { $(".gst_sel_wrap").css("display", "block"); }); }) 

 .gst_sel_wrap { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap_box"> <input type="text" name="total_enter" id="total_enter"> <select class="gst_sel_wrap"> <option>GST SLABS</option> <option value="">0%</option> <option value="">5%</option> <option value="">12%</option> <option value="">18%</option> <option value="">28%</option> </select> </div> 

Answer 3

To achieve this you can use the input event, as it fires when a key is pressed and also when a value is copy/pasted in. You should also check the value of the element to ensure that it isn't empty, as the value can be deleted, when I would assume your select should be hidden again.

Finally, note that you can use toggle() to hide or show the select based on the given value, in a more succinct way. Try this:

 $(document).ready(function() { $("#total_enter").on('input', function() { $(".gst_sel_wrap").toggle(this.value.trim() != ''); }); }) 

 .gst_sel_wrap { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap_box"> <input type="text" name="total_enter" id="total_enter"> <select class="gst_sel_wrap"> <option>GST SLABS</option> <option value="">0%</option> <option value="">5%</option> <option value="">12%</option> <option value="">18%</option> <option value="">28%</option> </select> </div>