disabed element เมือเลือกรายการแรก

การสั่ง disabled element ใดๆ เมื่อทำการเลือก select ไปที่รายการแรก ยกตัวอย่างเช่น listmenu 2 ชั้น เมื่อเลือก listmenu ตัวที่ 1 แล้วจะไปโหลดข้อมูลที่สัมพันธ์กันมาแสดง แต่หากเลือกรายการแรก ให้ืำการ disabled listmenu ตัวที่ 2 และให้ listmenu ตัวที่ 2 กลับไปเลือกรายการอื่นเช่นกัน

<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 ชนิดอื่นแทนก็ได้