javascript實現下拉提示選擇框

2019-11-20 10:53:54

字體：大中小

來源：轉載

供稿：網友

本文介紹了select和sugget結合起來使用的例子，支持下拉的直接選擇，也支持在下拉內容中輸入過濾。
整體效果就是下面這樣的：

1、首先需要引入如下文件

<link href="select2.min.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="select2.min.js"></script>

這里要注意jquery要放在select2的前面。
2、一些實例

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8">   <title>Document</title>   <link href="select2.min.css" rel="stylesheet" />   <style type="text/css">   .select2-dropdown {     margin-left: 8px !important;     margin-top: 20px !important;   }   </style> </head>  <body>   <h1>這是單選例子</h1>   <div class="s1-example">     <select class="js-example-basic-single" style="width:200px">       <optgroup label="Alaskan/Hawaiian Time Zone">         <option value="AK">Alaska</option>         <option value="HI">Hawaii</option>         <option value="">請選擇</option>       </optgroup>       <optgroup label="Pacific Time Zone">         <option value="CA">California1111111111111111111111111111111111111111111111111</option>         <option value="NV">Nevada</option>         <option value="OR">Oregon</option>         <option value="WA">Washington</option>       </optgroup>       <optgroup label="Mountain Time Zone">         <option value="AZ">Arizona</option>         <option value="CO">Colorado</option>         <option value="ID">Idaho</option>         <option value="MT">Montana</option>         <option value="NE">Nebraska</option>         <option value="NM">New Mexico</option>         <option value="ND">North Dakota</option>         <option value="UT">Utah</option>         <option value="WY">Wyoming</option>       </optgroup>       <optgroup label="Central Time Zone">         <option value="AL">Alabama</option>         <option value="AR">Arkansas</option>         <option value="IL">Illinois</option>         <option value="IA">Iowa</option>         <option value="KS">Kansas</option>         <option value="KY">Kentucky</option>         <option value="LA">Louisiana</option>         <option value="MN">Minnesota</option>         <option value="MS">Mississippi</option>         <option value="MO">Missouri</option>         <option value="OK">Oklahoma</option>         <option value="SD">South Dakota</option>         <option value="TX">Texas</option>         <option value="TN">Tennessee</option>         <option value="WI">Wisconsin</option>       </optgroup>       <optgroup label="Eastern Time Zone">         <option value="CT">Connecticut</option>         <option value="DE">Delaware</option>         <option value="FL">Florida</option>         <option value="GA">Georgia</option>         <option value="IN">Indiana</option>         <option value="ME">Maine</option>         <option value="MD">Maryland</option>         <option value="MA">Massachusetts</option>         <option value="MI">Michigan</option>         <option value="NH">New Hampshire</option>         <option value="NJ">New Jersey</option>         <option value="NY">New York</option>         <option value="NC">North Carolina</option>         <option value="OH">Ohio</option>         <option value="PA">Pennsylvania</option>         <option value="RI">Rhode Island</option>         <option value="SC">South Carolina</option>         <option value="VT">Vermont</option>         <option value="VA">Virginia</option>         <option value="WV">West Virginia</option>       </optgroup>     </select>   </div>   <h1>這是多選例子</h1>   <div class="s2-example">     <select class="js-example-basic-multiple" multiple="multiple">       <optgroup label="Alaskan/Hawaiian Time Zone">         <option value="AK">Alaska</option>         <option value="HI">Hawaii</option>         <option value="">請選擇</option>       </optgroup>       <optgroup label="Pacific Time Zone">         <option value="CA">California1111111111111111111111111111111111111111111111111</option>         <option value="NV">Nevada</option>         <option value="OR">Oregon</option>         <option value="WA">Washington</option>       </optgroup>       <optgroup label="Mountain Time Zone">         <option value="AZ">Arizona</option>         <option value="CO">Colorado</option>         <option value="ID">Idaho</option>         <option value="MT">Montana</option>         <option value="NE">Nebraska</option>         <option value="NM">New Mexico</option>         <option value="ND">North Dakota</option>         <option value="UT">Utah</option>         <option value="WY">Wyoming</option>       </optgroup>       <optgroup label="Central Time Zone">         <option value="AL">Alabama</option>         <option value="AR">Arkansas</option>         <option value="IL">Illinois</option>         <option value="IA">Iowa</option>         <option value="KS">Kansas</option>         <option value="KY">Kentucky</option>         <option value="LA">Louisiana</option>         <option value="MN">Minnesota</option>         <option value="MS">Mississippi</option>         <option value="MO">Missouri</option>         <option value="OK">Oklahoma</option>         <option value="SD">South Dakota</option>         <option value="TX">Texas</option>         <option value="TN">Tennessee</option>         <option value="WI">Wisconsin</option>       </optgroup>       <optgroup label="Eastern Time Zone">         <option value="CT">Connecticut</option>         <option value="DE">Delaware</option>         <option value="FL">Florida</option>         <option value="GA">Georgia</option>         <option value="IN">Indiana</option>         <option value="ME">Maine</option>         <option value="MD">Maryland</option>         <option value="MA">Massachusetts</option>         <option value="MI">Michigan</option>         <option value="NH">New Hampshire</option>         <option value="NJ">New Jersey</option>         <option value="NY">New York</option>         <option value="NC">North Carolina</option>         <option value="OH">Ohio</option>         <option value="PA">Pennsylvania</option>         <option value="RI">Rhode Island</option>         <option value="SC">South Carolina</option>         <option value="VT">Vermont</option>         <option value="VA">Virginia</option>         <option value="WV">West Virginia</option>       </optgroup>     </select>   </div>   <h1>這是可清除有提示例子</h1>   <div class="s3-example">     <select class="js-example-placeholder-single" style="width:200px">       <optgroup label="Alaskan/Hawaiian Time Zone">         <option value="AK">Alaska</option>         <option value="HI">Hawaii</option>         <option value="">請選擇</option>       </optgroup>       <optgroup label="Pacific Time Zone">         <option value="CA">California1111111111111111111111111111111111111111111111111</option>         <option value="NV">Nevada</option>         <option value="OR">Oregon</option>         <option value="WA">Washington</option>       </optgroup>       <optgroup label="Mountain Time Zone">         <option value="AZ">Arizona</option>         <option value="CO">Colorado</option>         <option value="ID">Idaho</option>         <option value="MT">Montana</option>         <option value="NE">Nebraska</option>         <option value="NM">New Mexico</option>         <option value="ND">North Dakota</option>         <option value="UT">Utah</option>         <option value="WY">Wyoming</option>       </optgroup>       <optgroup label="Central Time Zone">         <option value="AL">Alabama</option>         <option value="AR">Arkansas</option>         <option value="IL">Illinois</option>         <option value="IA">Iowa</option>         <option value="KS">Kansas</option>         <option value="KY">Kentucky</option>         <option value="LA">Louisiana</option>         <option value="MN">Minnesota</option>         <option value="MS">Mississippi</option>         <option value="MO">Missouri</option>         <option value="OK">Oklahoma</option>         <option value="SD">South Dakota</option>         <option value="TX">Texas</option>         <option value="TN">Tennessee</option>         <option value="WI">Wisconsin</option>       </optgroup>       <optgroup label="Eastern Time Zone">         <option value="CT">Connecticut</option>         <option value="DE">Delaware</option>         <option value="FL">Florida</option>         <option value="GA">Georgia</option>         <option value="IN">Indiana</option>         <option value="ME">Maine</option>         <option value="MD">Maryland</option>         <option value="MA">Massachusetts</option>         <option value="MI">Michigan</option>         <option value="NH">New Hampshire</option>         <option value="NJ">New Jersey</option>         <option value="NY">New York</option>         <option value="NC">North Carolina</option>         <option value="OH">Ohio</option>         <option value="PA">Pennsylvania</option>         <option value="RI">Rhode Island</option>         <option value="SC">South Carolina</option>         <option value="VT">Vermont</option>         <option value="VA">Virginia</option>         <option value="WV">West Virginia</option>       </optgroup>     </select>   </div>   <div class="s4-example">     <select class="js-example-placeholder-multiple" multiple="multiple" style="width:400px">       <optgroup label="Alaskan/Hawaiian Time Zone">         <option value="AK">Alaska</option>         <option value="HI">Hawaii</option>         <option value="">請選擇</option>       </optgroup>       <optgroup label="Pacific Time Zone">         <option value="CA">California1111111111111111111111111111111111111111111111111</option>         <option value="NV">Nevada</option>         <option value="OR">Oregon</option>         <option value="WA">Washington</option>       </optgroup>       <optgroup label="Mountain Time Zone">         <option value="AZ">Arizona</option>         <option value="CO">Colorado</option>         <option value="ID">Idaho</option>         <option value="MT">Montana</option>         <option value="NE">Nebraska</option>         <option value="NM">New Mexico</option>         <option value="ND">North Dakota</option>         <option value="UT">Utah</option>         <option value="WY">Wyoming</option>       </optgroup>       <optgroup label="Central Time Zone">         <option value="AL">Alabama</option>         <option value="AR">Arkansas</option>         <option value="IL">Illinois</option>         <option value="IA">Iowa</option>         <option value="KS">Kansas</option>         <option value="KY">Kentucky</option>         <option value="LA">Louisiana</option>         <option value="MN">Minnesota</option>         <option value="MS">Mississippi</option>         <option value="MO">Missouri</option>         <option value="OK">Oklahoma</option>         <option value="SD">South Dakota</option>         <option value="TX">Texas</option>         <option value="TN">Tennessee</option>         <option value="WI">Wisconsin</option>       </optgroup>       <optgroup label="Eastern Time Zone">         <option value="CT">Connecticut</option>         <option value="DE">Delaware</option>         <option value="FL">Florida</option>         <option value="GA">Georgia</option>         <option value="IN">Indiana</option>         <option value="ME">Maine</option>         <option value="MD">Maryland</option>         <option value="MA">Massachusetts</option>         <option value="MI">Michigan</option>         <option value="NH">New Hampshire</option>         <option value="NJ">New Jersey</option>         <option value="NY">New York</option>         <option value="NC">North Carolina</option>         <option value="OH">Ohio</option>         <option value="PA">Pennsylvania</option>         <option value="RI">Rhode Island</option>         <option value="SC">South Carolina</option>         <option value="VT">Vermont</option>         <option value="VA">Virginia</option>         <option value="WV">West Virginia</option>       </optgroup>     </select>   </div>   <h1>這是直接使用js對象初始化的例子</h1>   <div>     <select class="js-example-data-array" style="width:200px"></select>   </div>   <div>     <select class="js-example-data-array-selected" style="width:200px">       <option value="2" selected="selected">duplicate</option>     </select>   </div>    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>   <script type="text/javascript" src="select2.min.js"></script>   <script type="text/javascript">   $(document).ready(function() {     $(".js-example-basic-single").select2(); //單選     $(".js-example-basic-multiple").select2(); //多選      $(".js-example-placeholder-single").select2({ //允許清除       placeholder: "Select a state", //默認提示語       allowClear: true     });      $(".js-example-placeholder-multiple").select2({       placeholder: "Select a state" //默認提示語     });       var data = [{       id: 0,       text: 'enhancement'     }, {       id: 1,       text: 'bug'     }, {       id: 2,       text: 'duplicate'     }, {       id: 3,       text: 'invalid'     }, {       id: 4,       text: 'wontfix'     }];      $(".js-example-data-array").select2({       data: data     })      $(".js-example-data-array-selected").select2({       data: data     })    });   </script> </body>  </html>

3、效果
效果1