Display Other Field Onchange

I have here selectbox with option value USA and OTHERS. What I need is if I choose OTHERS on Selectbox1 the Selectbox2 should be display none and textbox1 comes out. Other problem

Solution 1:

Try this

HTML

<selectid="cboCountry"><optionvalue="USA">USA</option><optionvalue="OTHERS">OTHERS</option></select><selectid="cboState"name="cboState"><optionvalue="Alabama">Alabama</option></select><inputtype="text"id="txtcboState"name="cboState"style="display:none;"/>

JS

$("#cboCountry").change(function() { 

    if ( $(this).val() == "OTHERS") {

    $("#cboState").hide();

    $("#txtcboState").show();

}
    else{

        $("#cboState").show();
        $("#txtcboState").hide();
    }

});

Note: ID Must be unique for each element.

To remove The name attribute of input, you can use the following

$("#txtcboState").removeAttr('name');

DEMO HERE

Solution 2:

Something like this?

$("#selectbox1").onchange(function() { selectionChanged();});

functionselectionChanged() {

if ( $("#selectbox1").val() == "other") {

    $("#selectbox2").hide();

    $("#textBox1").show();//should already be hidden

}

}

Make sure the IDs for your elements are unique.