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 h

Answer 1

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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;

}