jQuery - How to show/hide text box based on selected drop down

Question

Sorry if this is extremely obvious, but I have looked and looked for a solution but haven't found anything. I'm very new to jQuery, so even looking for what I want to do has been hard.

I have a page with a bunch of fields and drop down boxes that are populated from a database. So each drop down has the correct item (the one stored in the database) selected when the page loads. When that option is "Other" I want my Other text box to show up.

So, the question is; how do I show/hide that text box based on the selected drop down item when the page loads? Everything I have been able to find in my research has been related to the drop down menu changing. This works fine for one of the other pages I have. I don't want to have to reselect "Other" (triggering the change event).

Thanks

score 6 · Accepted Answer · answered Jun 21 '11 at 15:09

6

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

answered Jun 21 '11 at 15:09

Diego

16,436
26
84
136

@Diego What is I want to hide textfield by getting his name like `$('yourtextbox').hide();` – Muhammad Taqi Jul 26 '15 at 14:44
@MuhammadTaqiHassanBukhari I didn't understand what you want to do – Diego Jul 27 '15 at 12:47

score 2 · Answer 2 · answered Jun 21 '11 at 15:06

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 ...
});

answered Jun 21 '11 at 15:06

genesis

50,477
20
96
125

Asim · Answer 3 · 2015-05-15T07:52:55.780

Please try this code, hope it may 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');
    }
});

score 0 · Answer 4 · answered Jun 21 '11 at 15:07

I've had to do this very thing. Here's 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);
});

score 0 · Answer 5 · answered Jun 21 '11 at 15:08

If you have a select box, i.e.

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

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

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

Look up jquery .show() and .hide(). (http://api.jquery.com/show and http://api.jquery.com/hide).

score 0 · Answer 6 · answered Jun 21 '11 at 15:15

0

Assuming by default your html has both boxes and the "Other" box is hidden.

val = $('#myselect').val();

switch( val ) {

  case "Other":

    $('#mybox').hide();

    $('#myotherbox').show();

    break;

}

answered Jun 21 '11 at 15:15

Jose Faeti

12,126
5
38
52

jQuery - How to show/hide text box based on selected drop down

6 Answers6

Linked