首页
所有分类
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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
Vue实现按钮级权限方案
Nov 21 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
基于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
捷克购物网站(26) 菲律宾购物网站(13) 秘鲁购物网站(1) 智利购物网站(5) 新西兰购物网站(42) 匈牙利购物网站(11) 卡塔尔购物网站(3) 沙特阿拉伯购物网站(9) 北美洲购物网站(1) 巴基斯坦购物网站(2)
You might like
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
Bootstrap入门书籍之（三）栅格系统
2016/02/17 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python实现抢购IPhone手机
2018/02/07 Python
python实现媒体播放器功能
2018/02/11 Python
python lambda的使用详解
2021/02/26 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
美国隐形眼镜零售商：LensPure
2019/03/10 全球购物
什么是设计模式
2012/06/17 面试题
文秘专业大学生求职信
2013/11/10 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
初中校园广播稿
2014/02/02 职场文书
工作失职检讨书范文
2015/05/05 职场文书
2019最新版火锅店的创业计划书 ！
2019/07/12 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
Python实现照片卡通化
2021/12/06 Python
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS