อยากทราบชนิด (type) ของ element <select></select> จะ
วันนี้ขณะที่ผมกำลังเขียน script สำหรับงานอยู่ ต้องการทราบชนิดของ element ของ <select name="myselect">**เลือก**</select> เนื่องจากใน form นั้นมี element <select> อยู่หลายอัน เพื่อตรวจสอบว่าหากพบว่ามีการส่งค่ามาจาก element <select> ที่มีชื่อว่า myselect แล้วให้ทำงานตามต้องการ
selectform = pform.getElementsByTagName( 'select' );
for (i = 0; i < selectform.length; i++) {
if(selectform[i].type == "select" && selectform[i].name == "myselect") {
.
.
.
.
}
}
จากโค้ดข้างบน ปรากฎว่าโค้ดการตรวจสอบชนิดและชื่อของ element ที่ต้องการไม่ทำงาน ผมจึงเกิดความสงสัยว่าเกิดจากสาเหตุใด
ตรวจสอบชื่อ myselect คงไม่ผิดแน่ๆ
หรือว่าชนิดของ element <select></select> ไม่ใช่ "select" เหมือนดังกับ ชนิดของ element <input type="text"> คือ "text" หรือ element <input type="checkbox"> คือ "checkbox" หรือ element <input type="radio"> คือ "radio"
แล้วผมจะรู้ได้ยังไงว่าชนิดของ element <select></select> จริงๆคืออะไร เพราะว่าผมก็ไม่ใช่ผู้เชี่ยวชาญนี่ !!!
ถ้าจะให้ไปเปิดตำราคงไม่ทันใจแน่ๆเลย
ก็เลยลองเขียนโค้ดตรวจสอบชนิดของ element น่าจะให้คำตอบได้
<select name="myselect" onclick="alert(this.type)">
<option>**option**</option>
</select>
ผลปรากฎว่าสวรรค์ทรงโปรด มีข้อความ alert คือ select-one
ผมจึงถึงบางอ้อ มิหน้าล่ะ element <select> จึงมี property multiple ให้เลือกอีกอย่าง
ดังนั้นจากโค้ดข้างบนสุด พอผมระบุ
selectform[i].type == "select-one"
มันก็ทำงานตามที่ต้องการให้เป็น
ขอบคุณที่นี่ เพราะที่นี่ให้แรงบรรดาลใจแก่ผม
selectform = pform.getElementsByTagName( 'select' );
for (i = 0; i < selectform.length; i++) {
if(selectform[i].type == "select" && selectform[i].name == "myselect") {
.
.
.
.
}
}
จากโค้ดข้างบน ปรากฎว่าโค้ดการตรวจสอบชนิดและชื่อของ element ที่ต้องการไม่ทำงาน ผมจึงเกิดความสงสัยว่าเกิดจากสาเหตุใด
ตรวจสอบชื่อ myselect คงไม่ผิดแน่ๆ
หรือว่าชนิดของ element <select></select> ไม่ใช่ "select" เหมือนดังกับ ชนิดของ element <input type="text"> คือ "text" หรือ element <input type="checkbox"> คือ "checkbox" หรือ element <input type="radio"> คือ "radio"
แล้วผมจะรู้ได้ยังไงว่าชนิดของ element <select></select> จริงๆคืออะไร เพราะว่าผมก็ไม่ใช่ผู้เชี่ยวชาญนี่ !!!
ถ้าจะให้ไปเปิดตำราคงไม่ทันใจแน่ๆเลย
ก็เลยลองเขียนโค้ดตรวจสอบชนิดของ element น่าจะให้คำตอบได้
<select name="myselect" onclick="alert(this.type)">
<option>**option**</option>
</select>
ผลปรากฎว่าสวรรค์ทรงโปรด มีข้อความ alert คือ select-one
ผมจึงถึงบางอ้อ มิหน้าล่ะ element <select> จึงมี property multiple ให้เลือกอีกอย่าง
ดังนั้นจากโค้ดข้างบนสุด พอผมระบุ
selectform[i].type == "select-one"
มันก็ทำงานตามที่ต้องการให้เป็น
ขอบคุณที่นี่ เพราะที่นี่ให้แรงบรรดาลใจแก่ผม
ค่า property ต่างๆของ element เป็นค่าเฉพาะตัวของแต่ละ element ครับ การจะดูว่าจะอ่านค่าใดๆ จาก element ได้ ก็ดูจากค่า property ที่กำหนดได้ของแต่ละ element ครับ ยกตัวอย่าง
<input type="text" name="xxx" id="yyy" value="zzz" />
ค่าที่สามารถอ่านได้ก็จะมี
obj.tagName // input
obj.type // text
obj.name // xxx
obj.id // yyy
obj.value // zzz
ส่วนในกรณีของ select
<select name="xxx" id="yyy" >
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
</select>
จะเห็นว่าไม่มี type มันจึงอ่าน type ไม่ได้ครับ อ่านได้แต่
sel.tagName // select
sel.name // xxx
sel.id // yyy
และ sel.value ซึ่งจะอ่านได้จากค่าของ option ตัวที่ถูกเลือกครับ
ที่ http://www.javascriptkit.com/jsref/select.shtml
ท่านที่สนใจอ่านเพิ่มเติมได้จาก link ครับ
Properties
- type
A property available on all form elements, "type" returns the type of the calling form element. For SELECT, the two possible values are "select-one" or "select-multiple", depending on the type of selection list. The below code gives all SELECT elements in a particular form a CSS class of "selectclass":
<script type="text/javascript">
var myform=document.getElementById("someform")
for (var i=0; i<myform.elements.length; i++){ //loop through all form elements
if (myform.elements[i].type=="select-one" || myform.elements[i].type=="select-multiple"){
myform.elements[i].className="selectclass"
}
}
</script>
ลองดูตัวอย่างด้านล่างครับ และลอง run โค้ดนี้ บน Firefox และ IE ดูครับ
<select id="sample" type="select-multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<script type="text/javascript">
alert(document.getElementById("sample").type + ' ' + document.getElementById("sample").getAttribute('type'));
</script>