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

<select id="cboCountry">
    <option value="USA">USA</option>
    <option value="OTHERS">OTHERS</option>
</select>

<select id="cboState" name="cboState">
    <option value="Alabama">Alabama</option>
</select>

<input type="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();});

function selectionChanged() {

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

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

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

}

}

Make sure the IDs for your elements are unique.