jQuery的select2下拉框的搜索功能(使用select2插件，方便简单)

青衣

第一步:引入我们用使用的插件

jquery:
 
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 
select2：
 
css:
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
 
js:
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

第二步:创建一个html页面，body内容

<div>
      <select class="singleSelect" style="width: 200px;">
        <option value="">--请选择--</option>
        <option value="">阿里</option>
        <option value="">阿姨</option>
        <option value="">江南</option>
        <option value="">杭州</option>
        <option value="">无锡</option>
        <option value="">上海</option>
      </select>
 
    </div>

第三步:书写js脚本，调用我们的js方法

<script type="text/javascript">
 
    $(document).ready(function() {
        $('.singleSelect').select2();
 
      });
 
</script>

第四步:效果图

有个朋友新版版不能使用backspace删除输入框中的值

jQuery：https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js
 
select：https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css
 
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js
 
 
html代码：
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" ></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" ></script>
  <style>
    
  </style>
  <body>
    <div>
      <select class="singleSelect" style="width: 200px;">
        <option value="">--请选择--</option>
        <option value="">阿里</option>
        <option value="">阿姨</option>
        <option value="">江南</option>
        <option value="">杭州</option>
        <option value="">无锡</option>
        <option value="">上海</option>
      </select>
 
    </div>
      <script type="text/javascript">
 
    $(document).ready(function() {
        $('.singleSelect').select2();
 
      });
 
    </script>
  </body>
</html>

[jQuery] jQuery的select2下拉框的搜索功能(使用select2插件，方便简单)

相关帖子

常用jquery右健禁止命令

利用CSS换变文本选中后的颜色

常用的css伪类a标签

Q+CSS+DIV多彩随机变化链接样式tag标签样式

DZ游客搜索提示请求含有非法字符，被系统拒绝的解决方法

好看的CSS剪裁GIF背景图片动画特效

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

react如何引入css

青衣 LV4