How can i change options in dropdowns if it is generated dynamically? - php

Question

I do have this script to generate three dropdowns and one text input field for my webform that i have to submit to a database using PHP. This form is HTML but only this part is javascript to populate the fields. I am using this javascript to generate approx 15 sets of these dropdowns and text input fields. (1 set = 3 dropdowns and 1 input text field).
My question is : If user selects an option from first dropdown then the options in the other two dropdowns should change according to the selected option in the first drodown.
What I wanted to is after generating the desired number of sets by selecting the number from the dropdown in this fiddle, it will generate sets od 3 dropdowns and 1 input field dynamically. 
So if someone selects option one from the first dropdown it should change the options in the other dropdowns as well. 
JSFIDDLE
THE SCRIPT:
<script>
$(function() {
$("input[type=button][value=Add]").click(function(e) {
for (i = 0; i < document.getElementById('sel').value; i++) {
e.preventDefault();
var j = 1;
var newDiv = $("<div>").appendTo("#dropbox");
$("<select>").attr("name", "input1_"+j).appendTo(newDiv).append(
$("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
$("<select>").attr("name", "input2_"+j).appendTo(newDiv).append(
$("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
$("<select>").attr("name", "input3_"+j).appendTo(newDiv).append(
$("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
$("<input>").attr("name", "input4_"+j).appendTo(newDiv);
$("<button>").text("Remove").appendTo(newDiv).click(function(e) {
e.preventDefault();
$(this).parent().remove();
})
j++;
}
})
})
</script>
THE HTML:
<form>
<select id="sel">
<option value="" selected="selected"></option>
<option value="01" >01</option>
<option value="02" >02</option>
<option value="03" >03</option>
<option value="04" >04</option>
<option value="05" >05</option>
<option value="06" >06</option>
<option value="07" >07</option>
<option value="08" >08</option>
<option value="09" >09</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
</select>
<input type="button" value="Add" />
<div id="dropbox"></div>
</form>

Answer 1

Since you use jQuery, I suggest to add a change event to your dropdown. (The linked jQuery docs page contains a full example).
Regarding filling the other 2 drop-downs, you have several options, such as:
Static: Your PHP code that creates the page fills in a javascript array with all possible options needed according to user choice in the 1st dropdown. Then your javascript code can use this array whenever a change event is triggered.
Dynamic: If sub-choices can't be predicted or loaded at page load, use a jQuery ajax request to query the server for options matching user choice. You may also want to read about the JSon data format (supported by PHP using json_encode)

Answer 2

DEMO
I gave the sel and the button an ID and changed the dom access to jQuery
I also use the "i" and "j" now
Assuming you wanted to syncronise the 3 selects, the code could look like this
$(function() {
$("input[type=button][value=Add]").click(function(e) {
e.preventDefault();
for (var i=0,n=$('#sel').val();i<n; i++) {
var newDiv = $("<div>").appendTo("#dropbox");
for (var j=0;j<3;j++) {
var id = "input"+i+"_"+j;
$("<select>")
.attr("id",id)
.attr("name",id)
.on("change",function() {
// set all other select's value to this value
$(this).siblings("select").val(this.value);
})
.append(
$("<option>").val("0").text("Option 1"),
$("<option>").val("1").text("Option 2"))
.appendTo(newDiv);
} // j
$("<input>")
.attr("name", "input"+i+"_"+j)
.appendTo(newDiv);
$("<button>").text("Remove").appendTo(newDiv).click(function(e) {
e.preventDefault();
$(this).parent().remove();
})
} // i
})
})​