I need help passing dropdown list items to an iframe source (src) through a loop. The issue I'm facing is that the loop runs so fast that it directly goes to the last index of the dropdown list, causing the iframe to load only the last index item of the dropdown. I've tried using both setTimeout and setInterval but it's not working.
Here is my code...
//Dropdown list
<label>Faculty (Employee Code)</label>
<select class="form-control" name="faculties" id="faculties" onchange="update_chart(this.value,document.getElementById('myIframe'))">
<option>--Select--</option>
</select>
//frame
<iframe id="myIframe" src="chart_course_wise.php" frameborder="0" ></iframe>
<script>
function update_chart(str, myIframe) {
var dept = document.getElementById('dept_code').value;
var sem = document.getElementById('sem').value;
var regExp = /\(([^)]+)\)/;
var emp_code = regExp.exec(str);
myIframe.src = "chart_course_wise.php?fac=" + emp_code[1] + "&dept=" + dept + "&sem=" + sem;
}
function generate(){
var element = document.getElementById('faculties'),i;
var length = element.options.length;
for(i=1;i<length;i++){
var ddl = element.options[i].value;
update_chart(ddl,document.getElementById('myIframe'));
}
}
</script>