首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现下拉提示选择框

Posted in Javascript onDecember 29, 2015

本文介绍了select和sugget结合起来使用的例子，支持下拉的直接选择，也支持在下拉内容中输入过滤。
整体效果就是下面这样的：

javascript实现下拉提示选择框 

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

javascript实现下拉提示选择框

效果2

javascript实现下拉提示选择框

还有一些其它的内容，比如果说支持通过ajax查找来填充，支持input等，想要了解更多内容的朋友请阅读相关文章。

javascript实现下拉提示选择框

- Author -

林炳文Evankaka

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 解疑
Nov 11 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
document.forms用法示例介绍
Jun 26 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 #Javascript
js+css简单实现网页换肤效果
Dec 29 #Javascript
Jquery使用小技巧汇总
Dec 29 #Javascript
js为什么不能正确处理小数运算？
Dec 29 #Javascript
javascript从作用域链谈闭包
Jul 29 #Javascript
你有必要知道的25个JavaScript面试题
Dec 29 #Javascript
JavaScript仿支付宝密码输入框
Dec 29 #Javascript
update(2) 索尼ICF-36(1) tcp/ip(1) 限速(1) 德生2P3(1) 数据库卡死(1) 备份(2) 索引(8) IP(1) 全局锁(1)
You might like
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
基于laravel制作APP接口（API）
2016/03/15 PHP
使用php从身份证号中获取一系列线索（星座、生肖、生日等）
2016/05/11 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
javascript window对象属性整理
2009/10/24 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
JavaScript常用脚本汇总（三）
2015/03/04 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
2016/02/16 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中进程和线程的区别详解
2017/10/29 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
什么是servlet
2012/05/08 面试题
内业资料员岗位职责
2014/01/04 职场文书
社区庆八一活动方案
2014/02/02 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
会计专业自荐信
2014/06/03 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
爱心捐款活动总结
2015/05/09 职场文书
西安事变观后感
2015/06/12 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python