javascript實(shí)現(xiàn)下拉提示選擇框
本文介紹了select和sugget結(jié)合起來(lái)使用的例子,支持下拉的直接選擇,也支持在下拉內(nèi)容中輸入過(guò)濾。
整體效果就是下面這樣的:
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、一些實(shí)例
<!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="">請(qǐng)選擇</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="">請(qǐng)選擇</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="">請(qǐng)選擇</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="">請(qǐng)選擇</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對(duì)象初始化的例子</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", //默認(rèn)提示語(yǔ) allowClear: true }); $(".js-example-placeholder-multiple").select2({ placeholder: "Select a state" //默認(rèn)提示語(yǔ) }); 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
效果2
還有一些其它的內(nèi)容,比如果說(shuō)支持通過(guò)ajax查找來(lái)填充,支持input等,想要了解更多內(nèi)容的朋友請(qǐng)閱讀相關(guān)文章。
- js輸入框郵箱自動(dòng)提示功能代碼實(shí)現(xiàn)
- 仿新浪微博登陸郵箱提示效果的js代碼
- JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼
- 一個(gè)仿微博登陸郵箱提示框js開(kāi)發(fā)案例
- JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能
- js仿QQ郵箱收件人選擇與搜索功能
- JavaScript實(shí)現(xiàn)郵箱地址自動(dòng)匹配功能代碼
- JavaScript 文本框下拉提示(自動(dòng)提示)
- JS仿百度自動(dòng)下拉框模糊匹配提示
- javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全
- JS實(shí)現(xiàn)的郵箱提示補(bǔ)全效果示例
相關(guān)文章
JavaScript如何將偽數(shù)組轉(zhuǎn)換成數(shù)組?
這篇文章主要介紹了JavaScript如何將偽數(shù)組轉(zhuǎn)換成數(shù)組,?偽數(shù)組的主要特征是一個(gè)對(duì)象,并且該對(duì)象有l(wèi)ength屬性,更多參考內(nèi)容,需要的小伙伴可以參考一下2022-07-07JavaScript 產(chǎn)生不重復(fù)的隨機(jī)數(shù)三種實(shí)現(xiàn)思路
在 JavaScript 中,一般產(chǎn)生的隨機(jī)數(shù)會(huì)重復(fù),但是有時(shí)我們需要不重復(fù)的隨機(jī)數(shù),如何實(shí)現(xiàn)?本文給于解決方法,需要的朋友可以參考下2012-12-12JSON 的正確用法探討:Pyhong、MongoDB、JavaScript與Ajax
這篇文章主要介紹了JSON 的正確用法探討:Pyhong、MongoDB、JavaScript與Ajax的相關(guān)資料,具有參考借鑒價(jià)值,需要的朋友一起學(xué)習(xí)吧2016-05-05Javascript下IE與Firefox下的差異兼容寫法總結(jié)
總結(jié)一部分IE和Firefox的javascript差異寫法,對(duì)于像書寫多瀏覽器兼容性更好的代碼,可以參考下。2010-06-06