Tag Archive list

  • Home   /  
  • Posts tagged "list"
    • ( Page6 ) ( Page6 )
Byphunsanit
, , , , , , , , , , , ,

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

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

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

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

  1. download jQuery.chosen มาจาก harvesthq Chosen แตกไฟล์
  2. ใส่ code ง่ายๆ ตามตัวอย่าง
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    <!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>
  3. ใช้ได้แล้ว
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Recent Posts

Proudly powered by WordPress | Theme: Appointment by Webriti