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> - ใช้ได้แล้ว