A-AA+then

อยากทราบชนิด (type) ของ element <select></select> จะ

2,185
วันนี้ขณะที่ผมกำลังเขียน 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.type == "select" && selectform.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.type == "select-one"
มันก็ทำงานตามที่ต้องการให้เป็น

ขอบคุณที่นี่ เพราะที่นี่ให้แรงบรรดาลใจแก่ผม
 

6 ความคิดเห็น

ผมคิดว่าคงเข้าใจผิดอย่างแรงนะครับ

ค่า 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 ตัวที่ถูกเลือกครับ
1

เพราะอย่างนี้ ผมจึงต้องเข้ามาที่นี่บ่อย ๆ
2

วันนี้ผมมีข้อมูลเกี่ยวกับ select มาฝากครับ
ที่ http://www.javascriptkit.com/jsref/select.shtml
ท่านที่สนใจอ่านเพิ่มเติมได้จาก link ครับ
3

จะเห็นว่า select มี property type ด้วย


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.type=="select-one" || myform.elements.type=="select-multiple"){
  myform.elements.className="selectclass"
 }
}

</script>
 
4

ความจริงแล้ว ต้องไปดูด้วยครับ ว่า property แต่ละตัวที่ต้องการจะอ่านเป็น attribute ของ element นั้นๆ และมีเหมือนกันในทุก Browser หรือเปล่า ครับ เนื่องจากบน Browser ต่างชนิดกันอาจอ่านค่าเหล่านี้ได้ไม่เหมือนกันหรือไม่สามารถอ่านได้ครับ แต่ก็ยังสามารถอ่านได้ด้วยการใช้ ฟังก์ชั่น getAttribute() ครับ

ลองดูตัวอย่างด้านล่างครับ และลอง 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>
5

OK ครับ อาจารย์
6
^