javascript - Dropdown selection creating dynamic input types -

i have 3 options in dropdown in html.now on selecting each 1 of option in dropdown want different input types created dynamically.

firstly here options in dropdown :

<select  name="choicetosearch">      <option value="none" style="display:none;">         ---none---     </option>      <option value="searchname">         notification sender     </option>      <option value="searchtype">         notification type       </option>      <option value="searchdate">         notification date       </option>      </select> 

now, on selecting notification sender want a textbox displayed.

on selecting notification type want two checkboxes should shown.

on selecting notification date want two date type input fields shown.

how can done?please help.

you need learn javascript since didn't provide attemts solve problem. anyway, need create fields want show/hide depending on select box in html markup , hide them via css. afterwards have use on change js event on selectbox , check selected option. can hide/show boxes need.

check example

js:

$('.search-select').on('change', function(){   $('.search-inputs').children().hide();   var classn =$(this).find(":selected").val();   $('.'+classn).show(); }) 

html:

<select class="search-select" name="choicetosearch">  <option value="none">     ---none--- </option>  <option value="searchname">     notification sender </option>  <option value="searchtype">     notification type   </option>  <option value="searchdate">     notification date   </option> </select> <div class="search-inputs">   <input class="searchname" type="text"></input>   <input class="searchtype" type="checkbox"></input>   <input class="searchdate" type="text"></input> </div> 

please make sure refactor classnames , values since made quickly.