社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > javascript实现下拉提示选择框_javascript技巧

javascript实现下拉提示选择框_javascript技巧

WBOY
发布： 2016-05-16 15:22:53
原创
1417 人浏览过

本文介绍了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

效果2

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

相关标签：
javascript 选择框
来源：php.cn
上一篇：一种新的javascript对象创建方式Object.create()_javascript技巧 下一篇：基于JavaScript如何实现ajax调用后台定义的方法_jquery
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
来自于 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...
来自于 2024-04-06 12:53:11
0
1
376
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板