JQuery - How to show / hide a text field based on a selected drop-down list

Question

Sorry if this is very obvious, but I looked and looked for a solution, but found nothing. I am very new to jQuery, so even looking for what I want to do was difficult.

I have a page with a bunch of fields and dropdowns populated from the database. Thus, each snapshot has the correct element (the one that is stored in the database) selected when the page loads. When this parameter is "Other", I want the "Other" text box to appear.

So the question is: how can I show / hide this text box based on the selected dropdown when loading the page? All that I managed to find in my research is related to changing the menu. This works great for one of my other pages. I do not want to reselect "Other" (triggering a change event).

thanks

Answer 1

$(function() { if($("#yourDropDown").val() == 0) //I'm supposing the "Other" option value is 0. $("#yourTextBox").hide(); }); 

Answer 2

 $("option").bind('click', function(){ var selected = $(this).val(); alert(selected+' selected'); if (selected == '1') { /* do anything you want */ } if (selected == '2') { /* do anything you want */ } //etc ... }); 

Answer 3

I had to do it. Here is the code I used:

 $(function() { var jqDdl = $('#ddl'), onChange = function(event) { if ($(this).val() === 'Other') { $('#otherTxtbox').show(); $('#otherTxtbox').focus().select(); } else { $('#otherTxtbox').hide(); } }; onChange.apply(jqDdl.get(0)); // To show/hide the Other textbox initially jqDdl.change(onChange); }); 

Answer 4

If you have a selection box, i.e.

 <select class="myselect"> .... </select> 

you can bind to .change() , i.e.

 $('.myselect').change(function() { --> do show hide here. }); 

Take a look at jquery .show() and .hide() . (http://api.jquery.com/show and http://api.jquery.com/hide ).

Answer 5

Assuming your html has both fields by default, and the Other field is hidden.

 val = $('#myselect').val(); switch( val ) { case "Other": $('#mybox').hide(); $('#myotherbox').show(); break; } 

Answer 6

Please try this code, hope it can work

  <asp:TextBox ID="txtOtherEntity" runat="server" style="display:none;" ></asp:TextBox> $(function() { $("#ddlEntity").change(function() { var selectedVal = $('option:selected', this).text(); if(selectedVal == "Other") { $('#txtOtherEntity').css('display', 'block'); } else { $('#txtOtherEntity').css('display', 'none'); } });