html - using dropdown lists to control forms -
i want use dropdown lists control format of menu want create. i've searched web several hours without success. we're looking create form format controllable dropdown menu. i've created simple web form below using html code below demonstrate;
what we're looking present form user dependent upon selection of "number of applicants" dropdown. if user selects 1, "applicant 1 title" dropdown presented. should user select 2, both "applicant 1 title" , "applicant 2 title" dropdowns presented user.
is has come across on here?
<html> <body> <form/> <label for="txt_appnos">number of applicants:</label> <select id="txt_appnos" name="appnos"> <option value="appnos1">1</option> <option value="appnos2">2</option> </select> <br> <br> <label for="txt_title1">applicant 1 title:</label> <select id="txt_title1" name="title1"> <option value="mr1">mr</option> <option value="mrs1">mrs</option> <option value="miss1">miss</option> <option value="ms1">ms</option> </select> <br> <br> <label for="txt_title2">applicant 2 title:</label> <select id="txt_title2" name="title2"> <option value="mr2">mr</option> <option value="mrs2">mrs</option> <option value="miss2">miss</option> <option value="ms2">ms</option> </select> </form> </body> </html>
try below code.
$('#appnos').on('change', function() { var val = $(this).val(); $('#form1').hide(); $('#form2').hide(); $('#' + val).show(); });
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <label for="txt_appnos">number of applicants:</label> <select id="appnos" name="appnos"> <option value="form1">1</option> <option value="form2">2</option> </select> <br> <br> <form id="form1" class="hidden"> <label for="txt_title1">applicant 1 title:</label> <select id="txt_title1" name="title1"> <option value="mr1">mr</option> <option value="mrs1">mrs</option> <option value="miss1">miss</option> <option value="ms1">ms</option> </select> </form> <form id="form2" class="hidden"> <label for="txt_title2">applicant 2 title:</label> <select id="txt_title2" name="title2"> <option value="mr2">mr</option> <option value="mrs2">mrs</option> <option value="miss2">miss</option> <option value="ms2">ms</option> </select> </form>
Comments
Post a Comment