select – PlusMagi's Blog By Pitt Phunsanit

Joget: สร้าง Chained select box

บางครั้งก็ต้องสร้างฟอร์มโดยเลือกข้อมูลที่สัมพันธ์กันเช่น ถ้าเค้าตอบมาว่าผู้ชาย คำนำหน้านามของเค้าคงไม่ใช่นางสาว การที่ select box ฉลาดพอที่จะไม่ถามว่า คุณคือนาง หรือ นางสาว ผู้ใช้จะใช้เวลาในการกรอกข้อมูลน้อยลง

ทำได้โดยการสร้าง Chained select box

ในหน้า form builder ให้ลาก Select Box มาในตำแหน่งที่ต้องการ อาจจะอ่าน Joget: สร้าง select box จาก database ถ้ายังไม่เคยสร้างซีเล็คบ๊อกซ์
คลิก Edit icon หลัง input
สร้าง Grouping โดย
- ถ้าสร้าง options แบบ Options (Hardcoded) ให้ใส่ Grouping โดยมีค่าเท่ากับ ค่าใน parent input
- ถ้าสร้าง options แบบ JDBC Binder ให้ query โดยมี
  - Column ที่ 1 จะถูกใช้เป็น value ใน แต่ละ option
  - Column ที่ 2 จะเป็น label
- คลิก next
- คลิก next
- Field ID to control available options based on Grouping ให้ใส่ id ของ parent input เช่น ใส่ sex_id โดย sex_id เป็น dropdown box ที่มีตัวเลือก ชาย = 2 หญิง = 1 ถ้าต้องการให้ option ไหนแสดงเมื่อ sex_id ถูกเลือกว่าเป็นผู้ชาย (2) ก็ให้ grouping มีค่าเท่ากับ 2
ดังนั้นค่าในตารางคำนำหน้านาม ควรจะเป็นตามรูปแบบ

app_fd_titles

Id label Grouping

Please select

1 Miss 1

2 Mr 2

3 Mrs 1

4 Ms 1

5 Mx 1

เมื่อ sex_id มีค่าเท่ากับ 1 joget จะแสดง แต่ตัวเลือก Mr เท่านั้น

Noteแต่ถ้า Grouping ไม่มีค่า จะแสดงออกมาด้วย เหมือนที่แสดงตัวเลือก Please select

อ่านเพิ่มเติม ส่วนตัว: Joget: สร้าง select box จาก database

app_fd_titles
Id	label	Grouping
	Please select
1	Miss	1
2	Mr	2
3	Mrs	1
4	Ms	1
5	Mx	1

Joget: สร้าง select box จาก database

การสร้างตัวเลือกใน joget ไม่ควรใช้วิธีกำหนด ตัวเลือกในแต่ละฟอร์ม เพราะว่าถ้ามีการแก้ตัวเลือก จะต้องไปหาว่า dropdown box ตัวนี้มีอยู่ในฟอร์มไหนบ้าง แต่ถ้าเราดึงค่ามาจากดาต้าเบสแค่ไปเพิ่ม / แก้ไขในตารางที่เกี่ยวข้อง เทสซักหน้า ก็เสร็จแล้ว

ในหน้า form builder ให้ลาก Select Box มาในตำแหน่งที่ต้องการ
คลิก Edit icon หลัง input
กรอกข้อมูล
- ID จะใข้เป็น id ของ input และจะสร้าง column ตามรูปแบบ C_{id} ในตารางที่ผูกกับฟอร์มที่เราวาง input ในดาต้าเบสด้วย
- Label เป็นฉลากให้กับตัว input
- Or Choose Options Binder เลือกเป็น JDBC Binder
คลิก next
กรอกข้อมูล
- Datasource เลือก Default Datasource
- ติ๊ก Add Empty Option เพื่อที่จะได้ใส่ option ที่ไม่ได้เลือกอะไร ที่ yii จะเรียกว่า prompt นั่นเอง จากนั้นให้กรอก Empty Option Label ที่จะแสดงเป็น label ของ option เช่น Please select
- SQL SELECT Query ให้กรอก query โดย
  - Column ที่ 1 จะถูกใช้เป็น value ใน แต่ละ option
  - Column ที่ 2 จะเป็น label
  ตัวอย่าง
```
SELECT
id AS value, c_name AS label
FROM
app_fd_titles
ORDER BY c_name ASC
```

ข้อมูลตัวอย่าง

CREATE TABLE `app_fd_titles` (
`id` int(2) unsigned NOT NULL,
`dateCreated` datetime DEFAULT NULL,
`dateModified` datetime DEFAULT NULL,
`createdBy` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`createdByName` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`modifiedBy` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`modifiedByName` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`c_name` varchar(255) DEFAULT NULL,
`c_sex_id` int(1) unsigned DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (1,NULL,NULL,NULL,NULL,NULL,NULL,'Miss',1);
INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (2,NULL,NULL,NULL,NULL,NULL,NULL,'Mr',2);
INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (3,NULL,NULL,NULL,NULL,NULL,NULL,'Mrs',1);
INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (4,NULL,NULL,NULL,NULL,NULL,NULL,'Ms',1);
INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (5,NULL,NULL,NULL,NULL,NULL,NULL,'Mx',1);

ใส่ฟิลเตอร์ให้ select box

select box (drop down/ dropdown / ดรอปดาวน์ / list / ลิสต์ หลายชื่อเหลือกเกิน) นิยมใช้เวลาต้องการให้ user เลือกจากตัวเลือกที่กำหนดให้เท่านั้น แต่ถ้ามันมีเยอะมาก อย่าง 77 จังหวัด ถ้าต้องเลือกบ่อยๆ ก็ไม่สดวกที่จะต้องไล่หา แก้ได้โดยใช้ jQuery ใส่ filter ให้

ดูตัวอย่างการทำงานได้ที่

ตัวอย่าง Demo -> =>

download jQuery.chosen มาจาก harvesthq Chosen แตกไฟล์

ใส่ code ง่ายๆ ตามตัวอย่าง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Chosen Demo By Pitt Phunsanit</title>
<link href="chosen/chosen.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<select id="province" style="width:200px;">
	<option value="64">กระบี่</option>
	<option value="1">กรุงเทพมหานคร</option>
	<option value="56">กาญจนบุรี</option>
	<option value="34">กาฬสินธุ์</option>
	<option value="49">กำแพงเพชร</option>
	<option value="28">ขอนแก่น</option>
	<option value="13">จันทบุรี</option>
	<option value="15">ฉะเชิงเทรา</option>
	<option value="11">ชลบุรี</option>
	<option value="9">ชัยนาท</option>
	<option value="25">ชัยภูมิ</option>
	<option value="69">ชุมพร</option>
	<option value="45">เชียงราย</option>
	<option value="38">เชียงใหม่</option>
	<option value="72">ตรัง</option>
	<option value="14">ตราด</option>
	<option value="50">ตาก</option>
	<option value="17">นครนายก</option>
	<option value="58">นครปฐม</option>
	<option value="36">นครพนม</option>
	<option value="19">นครราชสีมา</option>
	<option value="63">นครศรีธรรมราช</option>
	<option value="47">นครสวรรค์</option>
	<option value="3">นนทบุรี</option>
	<option value="76">นราธิวาส</option>
	<option value="43">น่าน</option>
	<option value="77">บึงกาฬ</option>
	<option value="20">บุรีรัมย์</option>
	<option value="4">ปทุมธานี</option>
	<option value="62">ประจวบคีรีขันธ์</option>
	<option value="16">ปราจีนบุรี</option>
	<option value="74">ปัตตานี</option>
	<option value="5">พระนครศรีอยุธยา</option>
	<option value="44">พะเยา</option>
	<option value="65">พังงา</option>
	<option value="73">พัทลุง</option>
	<option value="53">พิจิตร</option>
	<option value="52">พิษณุโลก</option>
	<option value="61">เพชรบุรี</option>
	<option value="54">เพชรบูรณ์</option>
	<option value="42">แพร่</option>
	<option value="66">ภูเก็ต</option>
	<option value="32">มหาสารคาม</option>
	<option value="37">มุกดาหาร</option>
	<option value="46">แม่ฮ่องสอน</option>
	<option value="24">ยโสธร</option>
	<option value="75">ยะลา</option>
	<option value="33">ร้อยเอ็ด</option>
	<option value="68">ระนอง</option>
	<option value="12">ระยอง</option>
	<option value="55">ราชบุรี</option>
	<option value="7">ลพบุรี</option>
	<option value="40">ลำปาง</option>
	<option value="39">ลำพูน</option>
	<option value="30">เลย</option>
	<option value="22">ศรีสะเกษ</option>
	<option value="35">สกลนคร</option>
	<option value="70">สงขลา</option>
	<option value="71">สตูล</option>
	<option value="2">สมุทรปราการ</option>
	<option value="60">สมุทรสงคราม</option>
	<option value="59">สมุทรสาคร</option>
	<option value="18">สระแก้ว</option>
	<option value="10">สระบุรี</option>
	<option value="8">สิงห์บุรี</option>
	<option value="51">สุโขทัย</option>
	<option value="57">สุพรรณบุรี</option>
	<option value="67">สุราษฎร์ธานี</option>
	<option value="21">สุรินทร์</option>
	<option value="31">หนองคาย</option>
	<option value="27">หนองบัวลำภู</option>
	<option value="6">อ่างทอง</option>
	<option value="26">อำนาจเจริญ</option>
	<option value="29">อุดรธานี</option>
	<option value="41">อุตรดิตถ์</option>
	<option value="48">อุทัยธานี</option>
	<option value="23">อุบลราชธานี</option>
</select>
<script src="../jQuery/jquery-2.1.3.min.js"></script><!-- เรียกใช้ jQuery -->
<script src="chosen/chosen.jquery.min.js"></script><!-- เรียกใช้ jQuery plugin -->
<script>
$(function(){

	$('#province').chosen(); <!-- เรียกใช้ jQuery plugin chosen กับ id province-->

})
</script>
</body>
</html>

ใช้ได้แล้ว

PlusMagi's Blog By Pitt Phunsanit

Tag Archive select

Joget: สร้าง Chained select box

Joget: สร้าง select box จาก database

ใส่ฟิลเตอร์ให้ select box

ตัวอย่าง Demo -> =>