Adding Select Option Field using PHP and Javascript

Explaination:

In this tutorial i has explained the about the onchange events for append javascript(ie.,Adding Select Option Field by Onchange events using Javascript).
We will call the function onchange where we pass the attributs there we call the event function.In the select option field according to that field we
have to add the extra fields means there should be call the functions.The other two fields names have to be take it to be an array[].Then we will pass the
two field id's into javascript.By using the msdropdown javascript and that css is used to design the dropdown fields.id="addDetails" is very important
to dispaly the results of the div.Then append function is play an important role for adding the extra <select><option>....</option></select> fields.
I hope this tutorial is very usefull to use the javascript in an different manner.
By using this style only the drop down field is been displayed properly 

style.css:
<style>.float_left {
float: left !important;
}
.clear{clear:both; margin: 2px 2px 2px 110px;}
</style> 
Form:
<form action="" name="form"><div class="padding8 float_left hotel_age_part_select" >Rooms<br/><select class="text_box_radius adult_hotel_textbox" id="roomno" name="rooms" style="float:left;background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #A4A4A4; border-radius: 5px;float: left;height:34px; padding: padding: 3px 1px 2px 0;;width: 110px !important;#5B5B5B;" onchange="addRooms(this.value);"><option>1</option><option>2</option><option>3</option><option>4</option></select></div> <div class="padding8 float_left hotel_age_part_select" ><span style="margin-left: 45px;">Adults</span><br/><img src="room1.png" style="float:left;margin:-5px 2px 0 0;"/><select class="text_box_radius adult_hotel_textbox " id="adult1" name="adults[]" style="float:left;background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #A4A4A4; border-radius: 5px;float: left;height:34px; padding: padding: 3px 1px 2px 0;;width: 110px !important;#5B5B5B;" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div> <div class="padding8 float_left hotel_age_part_select" >Childrens<br/><select class="text_box_radius adult_hotel_textbox " id="child1" name="child[]" style="float:left;background: none repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #A4A4A4; border-radius: 5px;float: left;height:34px; padding: padding: 3px 1px 2px 0;;width: 110px !important;#5B5B5B;" ><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div> <div id="addDetails"></div></form> 

Note:If u want the images also want to be displayed along with the fields you store it to be in your folder.Here what the class i have called means thatshould be very important suppose if you may change u shouls call th correct style on their otherwise it should be very prob's so be carefull if u may changethe class name in this coding.
Css and Javascript files: 
<link href="msdropdown.css" rel="stylesheet" type="text/css" /><script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery.dd.min.js"></script>

Download the js and css files:msdropdown.css,jquery.dd.min.js

Javascript Main Function:
<script type="text/javascript">
function addRooms(rooms) {
$("#addDetails").html("");
if(rooms > 1)
{
for(var i=2;i<=rooms;i++) {
var roomHtml = '<div class="clear"><div class="padding8 float_left hotel_age_part_select"><img src="room'+i+'.png" style="float:left;"><select class="text_box_radius adult_hotel_textbox" id="adult'+i+'" name="adults[]" style="float:left"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div><div class="padding8 float_left hotel_age_part_select"><select class="text_box_radius adult_hotel_textbox" id="child'+i+'" name="child[]" ><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></div></div>';
$("#addDetails").append(roomHtml);
$("#adult"+i).msDropdown().data("dd");
$("#child"+i).msDropdown().data("dd");
}}}
</script>

Screenshots:

Step 1:

Step 2:

Step 3:

Step 4: