onchange Event

Based on selected option show div and hide dive

by Suryar Praveen

HTML

<div class="row">    
Please Choose
<select name="type" id="choose" style="margin-left:57px; width:153px;">
<option name="first" value="first">First One</option>
<option name="second" value="second">Second One</option>
<option name="third" value="third">Third One</option>
</select>                    
</div>

<div class="row" id="row_toggle">
Choosen One<br>
<input type="text" name="f_first" class="dropdown" placeholder="First Input Box"><br>
<input type="text" name="s_second" class="dropdown" placeholder="Second Input Box"><br>
<input type="text" name="t_third" class="dropdown" placeholder="Third Input Box"><br>
</div>

JavaScript

$(function() {
    $('#row_toggle').hide(); 
    $('#choose').change(function(){
        if($('#choose').val() == 'second') {
            $('#row_toggle').show(); 
        } else {
            $('#row_toggle').hide(); 
        } 
    });
});