GORAGOD.com

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