disabed element เมือเลือกรายการแรก
การสั่ง disabled element ใดๆ เมื่อทำการเลือก select ไปที่รายการแรก ยกตัวอย่างเช่น listmenu 2 ชั้น เมื่อเลือก listmenu ตัวที่ 1 แล้วจะไปโหลดข้อมูลที่สัมพันธ์กันมาแสดง แต่หากเลือกรายการแรก ให้ืำการ disabled listmenu ตัวที่ 2 และให้ listmenu ตัวที่ 2 กลับไปเลือกรายการอื่นเช่นกัน
ในตัวอย่าง เราใช้การตรวจสอบค่าของ option ว่ามีค่าใด หากมีค่าเป้น 0 หมายถึงเลือกรายยการแรก ก็ให้เราไปทำการ disabled อีกตัว ส่วน select ตัวที่ 2 เราอาจเลือกใช้เป็น element ใดๆ ก็ได้ครับ เช่น input หรือ button
select.selectedIndex = 0;
หมายถึงให้กลับไปเลือกรายการแรก ถ้าไม่ใช่ select ก็ไม่ต้องใส่คำสั่งนี้ อาจใช้เป็นการกำหนดค่า default ของ element ชนิดอื่นแทนก็ได้
<select onchange="dochange(this)">
<option value="0">กรุณาเลือก</option>
<option value="1">รายการที่ 1</option>
<option value="2">รายการที่ 2</option>
<option value="3">รายการที่ 3</option>
</select>
<select id="sub_select" disabled="disabled">
<option value="0">กรุณาเลือก</option>
<option value="0">กรุณาเลือก</option>
<option value="1">รายการที่ 1</option>
<option value="2">รายการที่ 2</option>
<option value="3">รายการที่ 3</option>
</select>
<script type="text/javascript">
function dochange(sel) {
if (sel.value == '0') {
var select = document.getElementById('sub_select');
select.selectedIndex = 0; // กลับไปเลือกรายการแรก
select.disabled = 'disabled'; // disabled select
} else {
document.getElementById('sub_select').disabled = '';
// ทำต่อไป หรือ ดำเนินการอย่างอื่น
alert(sel.value);
}
}
</script>ในตัวอย่าง เราใช้การตรวจสอบค่าของ option ว่ามีค่าใด หากมีค่าเป้น 0 หมายถึงเลือกรายยการแรก ก็ให้เราไปทำการ disabled อีกตัว ส่วน select ตัวที่ 2 เราอาจเลือกใช้เป็น element ใดๆ ก็ได้ครับ เช่น input หรือ button
select.selectedIndex = 0;
หมายถึงให้กลับไปเลือกรายการแรก ถ้าไม่ใช่ select ก็ไม่ต้องใส่คำสั่งนี้ อาจใช้เป็นการกำหนดค่า default ของ element ชนิดอื่นแทนก็ได้