Display changing without AJAX - php

Question

I have 2 drop down lists , and value of the second drop down list should change according to the value selected in first drop down list. The current drop down lists are.
<select name="first">
<option name="a" value="a">a</option>
<option name="b" value="b">b</option>
<option name="c" value="c">c</option>
</select>
<select name="second">
<option name="a1" value="a1">a1</option>
<option name="a2" value="a2">a2</option>
<option name="b1" value="b1">b1</option>
<option name="b2" value="b2">b2</option>
<option name="c1" value="c1">c1</option>
<option name="c2" value="c2">c2</option>
</select>
I want the second drop down to be displayed according to the value selected in First dropdown, ie, if "a" is selected in first then only a1 and a2 should be shown. Also drop down values are pulled from a database
Thanks

Answer 1

There are just limited options to do so
OnChange event
Classic html/javascript/post refresh

Answer 2

One option is to load everything you have in the database in a standard form such as JSON. Then, you'd have to write javascript to build the dropdowns dynamically as the user interacts with each item.
Here is an example of how you'd go about doing it http://jsfiddle.net/9Z5t8/1/
There are some drawbacks. If you have a LOT of data (hundreds of records) to transfer this will be slow, but it's okay for a few records.

Answer 3

You can save the options in a separate array, and insert the appropriate ones when a value is selected: http://jsfiddle.net/KTQ7d/.
var arr = [];
var first_select = document.getElementsByTagName('select')[0]
var second_select = document.getElementsByTagName('select')[1]
var elems = second_select.getElementsByTagName('option');
for(var i = 0; i < elems.length; i++) {
arr.push(elems[i].value);
}
first_select.onchange = function() {
second_select.innerHTML = '';
for(var i = 0; i < arr.length; i++) {
if(arr[i][0]
==
first_select.options[first_select.selectedIndex].value) {
var opt = document.createElement('option');
opt.name = arr[i];
opt.value = arr[i];
opt.innerHTML = arr[i];
second_select.appendChild(opt);
}
}
};