<script type="text/javascript">
var select1_text = new Array();
var select1_value = new Array();
var select2_text = new Array();
var select2_value = new Array();
var select3_text = new Array();
var select3_value = new Array();
</script>
function show_select_next(change_select,select_next,array_next,array_next2)
{
var id_next = select_next ;
while(document.getElementById('id_select['+id_next+']'))
{
document.getElementById('id_select['+id_next+']').length=1;
document.getElementById('id_select['+id_next+']').options[0].selected =true
id_next++;
}
var name_text ;
var name_value;
var num_options = (parseFloat(array_next2[document.getElementById('id_select['+change_select+']').value].length)+1);
document.getElementById('id_select['+select_next+']').length = num_options;
code ที่ https://www.thaicreate.com/php/forum/017520.html
ใน dropdown ค่า value กับ text จะเป็นค่าเดียวกัน
หมายถึง <option value="ค่า value">ค่า text</option>
เช่น value = a , text =a
แต่ code ที่เขียนให้ใหม่ จะแยกจากกัน
เช่น <option value="ค่า id">ค่า name</option> : value = 1 , text =a
จะกำหนดจากตรงนี้ได้เลยว่า ค่า text กับ value ดึงจากฟิวด์ไหน
$text1 = "room_num"; // ฟิวด์ ที่ให้แสดงใน dropdown 1
$value1 = "room_id"; // ฟิวด์ ที่ให้ค่า value dropdown 1
<script type="text/javascript">
var select_text1 = new Array();
var select_value1 = new Array();
var select_text2 = new Array();
var select_value2 = new Array();
var select_text3 = new Array();
var select_value3 = new Array();
var select_text4 = new Array();
var select_value4 = new Array();
</script>
<form>
<select id="id_select[1]" name="name1" onChange="return show_select_next(1,2,select_text2,select_value2)"><option value="">select1</option></select>
<select id="id_select[2]" name="name2" onChange="return show_select_next(2,3,select_text3,select_value3)"><option value="">select2</option></select>
<select id="id_select[3]" name="name3" onChange="return show_select_next(3,4,select_text4,select_value4)"><option value="">select2</option></select>
<select id="id_select[4]" name="name4"><option value="">select4</option></select>
<input type="submit">
</form>
Code (PHP)
<?
$select1 = mysql_query("SELECT * FROM $table1");
for($s1=0;$s1<mysql_num_rows($select1);$s1++)
{
$arr_s1=mysql_fetch_array($select1);
?>
<script language="javascript">
select_text1[<?=$s1?>] = '<?=$arr_s1[$text1]?>';
select_value1[<?=$s1?>] = '<?=$arr_s1[$value1]?>';
select_text2['<?=$arr_s1[$value1]?>'] = new Array();
select_value2['<?=$arr_s1[$value1]?>'] = new Array();
</script>
<?
$select2 = mysql_query("SELECT * FROM $table2 where ".$id1." = '".$arr_s1[$id1]."'");
for($s2=0;$s2<mysql_num_rows($select2);$s2++)
{
$arr_s2=mysql_fetch_array($select2);
?>
<script language="javascript">
select_text2['<?=$arr_s1[$value1]?>'][<?=$s2?>] = '<?=$arr_s2[$text2]?>';
select_value2['<?=$arr_s1[$value1]?>'][<?=$s2?>] = '<?=$arr_s2[$value2]?>';
select_text3['<?=$arr_s2[$value2]?>'] = new Array();
select_value3['<?=$arr_s2[$value2]?>'] = new Array();
</script>
<?
$select3 = mysql_query("SELECT * FROM $table3 where ".$id2." = '".$arr_s2[$id2]."'");
for($s3=0;$s3<mysql_num_rows($select3);$s3++)
{
$arr_s3=mysql_fetch_array($select3);
?>
<script language="javascript">
select_text3['<?=$arr_s2[$value2]?>'][<?=$s3?>] = '<?=$arr_s3[$text3]?>';
select_value3['<?=$arr_s2[$value2]?>'][<?=$s3?>] = '<?=$arr_s3[$value3]?>';
select_text4['<?=$arr_s3[$value3]?>'] = new Array();
select_value4['<?=$arr_s3[$value3]?>'] = new Array();
</script>
<?
$select4 = mysql_query("SELECT * FROM $table4 where ".$id3." = '".$arr_s3[$id3]."'");
for($s4=0;$s4<mysql_num_rows($select4);$s4++)
{
$arr_s4=mysql_fetch_array($select4);
?>
<script language="javascript">
select_text4['<?=$arr_s3[$value3]?>'][<?=$s4?>] = '<?=$arr_s4[$text4]?>';
select_value4['<?=$arr_s3[$value3]?>'][<?=$s4?>] = '<?=$arr_s4[$value4]?>';
</script>
<?
}
}
}
}
?>
<script type="text/javascript">
var options1 = (parseFloat(select_text1.length)+1);
document.getElementById('id_select[1]').length = options1;
for(var ss1 = 1; ss1 < options1; ss1++)
{
document.getElementById('id_select[1]').options[ss1].text = select_text1[ss1-1];
document.getElementById('id_select[1]').options[ss1].value = select_value1[ss1-1];
}
function show_select_next(change_select,select_next,array_next,array_next2)
{
var id_next = select_next ;
while(document.getElementById('id_select['+id_next+']'))
{
document.getElementById('id_select['+id_next+']').length=1;
document.getElementById('id_select['+id_next+']').options[0].selected =true
id_next++;
}
var name_text ;
var name_value;
var num_options = (parseFloat(array_next2[document.getElementById('id_select['+change_select+']').value].length)+1);
document.getElementById('id_select['+select_next+']').length = num_options;
for(var nn = 1; nn < num_options; nn++)
{
name_value = array_next2[document.getElementById('id_select['+change_select+']').value][nn-1];
name_text = array_next[document.getElementById('id_select['+change_select+']').value][nn-1];
document.getElementById('id_select['+select_next+']').options[nn].text = name_text;
document.getElementById('id_select['+select_next+']').options[nn].value = name_value;
}
}
</script>