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

Diego · Accepted Answer · 2011-06-21 15:09:43Z

6

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

answered Jun 21, 2011 at 15:09

Diego

16.7k26 gold badges88 silver badges137 bronze badges

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

2 Comments

Muhammad Taqi Over a year ago

@Diego What is I want to hide textfield by getting his name like $('yourtextbox').hide();

Diego Over a year ago

@MuhammadTaqiHassanBukhari I didn't understand what you want to do

genesis · Accepted Answer · 2011-06-21 15:06:32Z

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, 2011 at 15:06

genesis

51.1k20 gold badges99 silver badges127 bronze badges

Comments

FishBasketGordo · Accepted Answer · 2011-06-21 15:07:40Z

0

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

answered Jun 21, 2011 at 15:07

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Comments

Ryan · Accepted Answer · 2011-06-21 15:08:11Z

0

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

answered Jun 21, 2011 at 15:08

Ryan

28.4k10 gold badges58 silver badges83 bronze badges

Comments

Jose Faeti · Accepted Answer · 2011-06-21 15:15:06Z

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, 2011 at 15:15

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

Comments

Asim · Accepted Answer · 2015-05-15 07:52:55Z

0

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

edited May 15, 2015 at 7:52

answered May 15, 2015 at 7:46

Asim

136 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related