การจัดการ HTML Select Elements โดยใช้ jQuery

ระหว่างที่กำลังพัฒนาระบบนั้น ผมมีปัญหากับการจัดการ Select Elements อย่างมากครับ เพราะผมนั้นถนัด java มากกว่า ่html หรือ พวก JavaScript. พอดีวันนี้มาเจอลิงค์ที่น่าสนใจมากๆครับ เลยมาแบ่งปันกัน.
ตัวอย่าง :

select id="elementid" name="elementname"

Basics:

//การเลือกโดยใช Id 
$(“#elementid”)
//การเลือก select elements ทั้งหมด
$(“select”)
//การเลือก select elements ทั้งหมดโดย class 
$(“select.classname”)

Hierarchy:

//การเลือก options ทั้งหมดจากselect element 
$(“#elementid option”)

Basic Filters:

//การเลือก option แรก 
$(“#elementid option:first”)
//การเลือก option สุดท้าย 
$(“#elementid option:last”)
//การเลือก option โดยการระบุตำแหน่ง 
$(“#elementid option:eq(2)”)

Attribute Filters:

//เลือก options ทั้งหมดที่มีการเชตค่า value 
$(“#elementid option[value]”)
//เลือก element โดย name 
$(“select[name=elementname]”)

Form Filters:

//เลือก option ที่ถูกเลือกแล้ว 
$(“#elementid option:selected”)

jQuery Object Accessors:

//คืนค่า element แต่ละตัวโดยใช each
$(“#elementid option”).each(function() {
   alert(“I am an option of #elementid”);
})
//คืนค่าจำนวน select elements ทั้งหมดในหน้านั้นๆ 
$(“select”).size()
//คืนค่าจำนวน options ทั้งหมดใน select element ที่ระบุ
$(“#elementid option”).size()
//การเลือก option ตามตำแน่งที่ระบุ 
$(“#elementid option”).eq(1)
//คืนค่าตำแหน่งของ option ที่ถูกเลือกแล้ว
$("#elementid option").index($("#elementid
option:selected")))

Attr:

//คืนค่าของattribute ตาม attribute name ที่ระบุมา
$(“#elementid”).attr(“name”)
//การเชตค่า attribute
$(“#elementid”).attr(“title”, “myselect”)
//การลบ attribute
$(“#elementid”).removeAttr(“title”)

Class:

//การเพิ่ม class ให้กับ select element  
$(“#elementid”).addClass(“inputs”)
//การลบ class ใน select element 
$(“#elementid”).removeClass(“inputs”)

HTML:

//การดึง HTML ภายใต้ select ที่ระบุ 
$(“#elementid”).html()
//การลบ options ทั้งหมดจาก select ระบุ 
$(“#elementid”).html(“”)

Text:

//ดึงค่า text ของ option แรก
$(“#elementid option:first”).text()
//คืนค่า text ของ option ที่ถูกเลือกจาก select 
$(“#elementid option:selected”).text()
//ลบ text ใน option สุดท้าย
e.g. $(“#elementid option:last”).text(“”)
//เชต text ให้กับ option ตามตำแหน่งที่ระบุ
e.g. $(“#elementid option:eq(2)”).text(“Purple”)

Value:

//ดึงค่า value ของ option แรก
$(“#elementid option:first”).val()
//คืนค่า value ของ option ที่ถุกเลือก
$(“#elementid”).val()
//เชตค่าให้ value ขง option ตามตำแหน่งที่ระบุ
$(“#elementid option:eq(2)”).val(“7”)
//เชตค่าให้กับ option ที่ถุกเลือกอยู่ 
$(“#elementid”).val(“7”)
//เชตการเลือกให้กับ element ตาม attr ที่ระบุ
$("#elementid").val("Oranges").attr("selected", "selected")

Finding:

//คืนค่าตำแหน่งของ option ที่ถุกเลือก
$("#elementid option:selected").prevAll().size()

Inserting Inside:

//เพิ่ม options ให้กับ select element โดยจะเพิ่มให้ในตำแหน่งสุดท้าย
$("#elementid").append("Apples")
//เพิ่ม options ให้กับ select element โดยจะเพิ่มให้ในตำแหน่งแรก
$("#elementid").prepend("Before Apples")

Inserting Outside:

//เพิ่ม options หลังตำแหน่งที่ระบุ
$("#elementid option:eq(0)").after("Some pears")
//เพิ่ม options ก่อนตำแหน่งที่ระบุ
$("#elementid option:eq(3)").before("Some apricots")

Replacing:

//แทนที่ค่าในตำแหน่งที่ระบุ
$("#elementid option:eq(1)").replaceWith("Some apples")

Removing:

//ลบ option ตามตำแหน่งที่ระบุ
$("#elementid option:eq(0)").remove()
//ลบ option ตามตำแหน่งแรก
$("#elementid option:first").remove()
//ลบ option ตามตำแหน่งสุดท้าย
$("#elementid option:last").remove()

Event Helpers:

//ฟังก์ชั้นที่เรียกใช้เมื่อ option มีการเปลี่ยนแปลงทางเหตุการณ์ 
$("#elementid").change(function() {})
//คืนค่า value ของ option ที่ถูกเลือก
$("#elementid").change(function() {
  alert($(this).val());
  alert($(this).children("option:selected").text());
})

อ้าอิง : http://www.myphpetc.com/2009/03/jquery-select-elements-tips-and-tricks.html

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.