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

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

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

  1. download jQuery.chosen มาจาก harvesthq Chosen แตกไฟล์
  2. ใส่ code ง่ายๆ ตามตัวอย่าง[code language=”html”]
    <!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>
    [/code]

  3. ใช้ได้แล้ว