Dropdown Input Show/Hide

Show input based on dropdown selected value

by LyndseyB

HTML

<select id="select">
    <option value="">Please Select...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
</select>
<input value="Option 1 is Selected" id="option1">
<!-- id is equal to option value -->
<input value="Option 2 is Selected" id="option2">
<input value="Option 3 is Selected" id="option3">
<input value="Option 4 is Selected" id="option4">

CSS

/* all inputs hidden on load */
 input {
    display:none;
}

JavaScript

// Specific Function for Dropdown
$(function () {

    //on change
    $('#select').change(function () {
        //get the value of dropdown e.g. 'option1'
        var thisVal = $(this).val();
        //hide all the textboxes, then filter our desired textbox and show it
        $('input').hide().filter('#' + thisVal).show();
    });


});