Populating a Form with a dropdown (jQuery)

Populating a Form with a dropdown (jQuery)

I thought I’d share this, maybe it’ll help somebody else. Basically this will take the value of the drop down (select) and show() that many input fields.

Javascript

 $(document).ready(function(){
	    $("select[name=example]").change(function () {
	    $(".hidden_input").hide();
		var cnt = $("select[name=example]").val();  
			
			while(cnt > 0) {
				$(".hidden_input#"+cnt).show();
				cnt--;	
			}
			
	    });
	 
});

HTML/CSS

<style>
.hidden_input{
	display: none;
}
</style>
<form>
    <select name="example">
        <option value="1">1 Guests</option>
        <option value="2">2 Guests</option>
        <option value="3">3 Guests</option>
        <option value="4">4 Guests</option>
        <option value="5">5 Guests</option>
        <option value="6">6 Guests</option>
    </select>
</form>
<div id="1" class="hidden_input">1<input name="former" type="text"></div>
<div id="2" class="hidden_input">2<input name="former" type="text"></div>
<div id="3" class="hidden_input">3<input name="former" type="text"></div>
<div id="4" class="hidden_input">4<input name="former" type="text"></div>
<div id="5" class="hidden_input">5<input name="former" type="text"></div>
<div id="6" class="hidden_input">6<input name="former" type="text"></div>

Posted on February 05, 2012