รู้สึกว่าตัวเองหายไปนานมาก นานจริงๆ ช่วงนี้อ่าน Android อยู่กับ บวกกับงานมากมายรุมเข้ามา 555
วันนี้เราจะมาพูดถึง Form ซึ่งเป็นสิ่งที่ทุกคนน่าจะรู้กับอยู่แล้ว และเราจะมาดูกันว่า jQuery จะมาช่วยอะไรเราได้บ้างครับ
เริ่มด้วยมาดูการเลือก element ใน Form เราดีกว่าว่าจะทำได้ยังไงบ้าง ซึ่งจะแยกออกเป็นสองอย่างครับ
1. การเลือกจากประเภท Element
ซึ่งสามารถทำได้โดยใช้ filter ครับ :text , :password , :radio , :checkbox , :submit , :button , :image , :file
เช่นหากเราอยากให้ text field ใน form เราทั้งหมดเปลี่ยนสี background เป็นสีเขียว ทำได้โดย
$('#myForm:text').css('background-color', 'green')
2. การเลือกจาก State
:enabled กับ :disabled ซึ่งจะดึง element ที่ enabled อยู่หรือ disabled อยู่นั่นเอง
:checked ใช้ในการหา checkbox หรือ radio ที่ถูกเลือกครับ ตัวอย่างครับ$(this).is(':checked')
:selected ใช้ในการเช็ค state ของ element option ที่ถูกเลือกครับ
ตัวอย่างโค้ดวันนี้ครับ
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option selected="selected">Shrubs</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
<script>
$("select[name='garden']").change(function () {
var str = "";
$("select[name='garden'] option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.trigger('change');
</script>
</body>
</html>
อธิบายโค้ด
Element Section
<select name="garden" multiple="multiple">
สร้าง select option ชื่อ garden ครับ
jQuery Event Section
$("select[name='garden']").change(function () {
var str = "";
$("select[name='garden'] option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.trigger('change');
เมื่อ select option ที่มีชื่อ garden เกิดการเปลี่ยนแปลง ก็จะเข้า .change ซึ่งเป็นการ register onchange function ให้กับ select option ครับ
.each ใช้ในการวนเข้าไปหา element ทั้งหมดที่ jquery เลือกเจอครับ ซึ่งในโค้ดจะทำการดึงเอาค่าที่เลือกมาต่อกันและแสดงใน div ครับ ($("div").text(str);)
สุดท้าย .trigger('change'); เป็นคำสั่งเพื่อให้เกิดการเรียก onchange ตั้งแต่เริ่มการแสดงหน้าจอครับ
------------------------------------------------------------------------------------------
Today Tip
วันนี้ tip มาดู jQuery select แบบเต็มๆ ครับ $("div[id='header']") ซึ่งเป็นการเลือก div ที่มี id เท่ากับ header นั่นเอง
ซึ่งรูปย่อที่ชินตากันจะเป็น $(‘div#header’) ซึ่งรูปแบบเต็มๆ สามารถใช้ได้หลากหลายกว่าครับ เช่น $("div[name='header_name']") ก็ได้
และอีกตัวอย่าง ใช้กับ fileter ก็ได้นะครับ :radio[name=sex]
ลองใช้ดูครับ
ความรู้จาก jQuery Novice to Ninja Feb 2010 ขอบคุณคร้าบ
และ http://api.jquery.com
