实现如图所示的下拉多选还能带有搜索功能。

<!DOCTYPE html>

<html>

  <head>

  <title></title>

  <script src="js/jquery-1.10.2.js"></script>

  <script type="text/javascript" src="js/bootstrap-select.js">

</script>
<!--引进bootstrap-select.css的文件-->
　　<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css">

  <!-- 3.0 -->

  <link href="css/bootstrap.min.css" rel="stylesheet">

  <script src="js/bootstrap.min.js"></script>

  <!-- 2.3.2

    <link href="css/bootstrap-combined.min.css" rel="stylesheet">

 <script src="js/bootstrap.js"></script>

    -->

  <script type="text/javascript">

 $(window).on('load', function () {

    $('.selectpicker').selectpicker({'selectedText': 'cat'});

    $('.selectpicker').selectpicker('val', 'Mustard');

   // var options=$("#id_select option:selected");

   // console.log(options.val());

 }); // $(function(){

   //      $.post('/bin/mydata',function(res){

   //          var txt='';

   //          for(var i = 0;i <res.length;i++){

   //              txt += '<option>' + res[i].name +'</option>';

   //          }

   //          console.log(txt);//

   //          document.getElementById('id_select').innerHTML=txt;

   //          $('.selectpicker').selectpicker('refresh');

   //      });

   //  });

  </script>

  </head>

  <body>

<label for="id_select"></label>

<select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">

    <option>cow(123)</option>

    <option>bull</option>

    <option>ASD</option>

    <option selected>Bla</option>

    <option>Ble</option>

     <option>cow(123)</option>

    <option>bull</option>

    <option>ASD</option>

    <option selected>Bla</option>

    <option>Ble</option> <option>cow(123)</option>

    <option>bull</option>

    <option>ASD</option>

    <option selected>Bla</option>

    <option>Ble</option>

     <option>cow(123)</option>

    <option>bull</option>

    <option>ASD</option>

    <option selected>Bla</option>

    <option>Ble</option> <option>cow(123)</option>

    <option>bull</option>

    <option>ASD</option>

    <option selected>Bla</option>

    <option>Ble</option> <option>cow(123)</option>

    <option>bull</option>

    <option>ASD</option>

    <option selected>Bla</option>

    <option>Ble</option>

     <option>cow(123)</option>

    <option>bull</option>

    <option>ASD</option>

    <option selected>Bla</option>

    <option>Ble</option> <option>cow(123)</option>

    <option>bull</option>

    <option>ASD</option>

    <option selected>Bla</option>

    <option>Ble</option>

  </select>

</body>

</html>

web实现下拉列表多选加搜索的更多相关文章

  1. selenium-java web自动化测试工具抓取百度搜索结果实例

    selenium-java web自动化测试工具抓取百度搜索结果实例 这种方式抓百度的搜索关键字结果非常容易抓长尾关键词,根据热门关键词去抓更多内容可以用抓google,百度的这种内容容易给屏蔽,用这 ...

  2. js进阶 9-14 js如何实现下拉列表多选移除

    js进阶 9-14 js如何实现下拉列表多选移除 一.总结 一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...

  3. SeaJS：一个适用于 Web 浏览器端的模块加载器

    什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definit ...

  4. web页面判断是否首次加载

    判断web页面是否是首次加载: if(!window.name){ window.name ='name' this.setState({ note:true })}

  5. 【Java Web开发学习】Spring加载外部properties配置文件

    [Java Web开发学习]Spring加载外部properties配置文件 转载:https://www.cnblogs.com/yangchongxing/p/9136505.html 1.声明属 ...

  6. C#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在前一篇博客<C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案>中介绍了目前市场主流 ...

  7. Web前端之复选框选中属性

    熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...

  8. Web前段优化，提高加载速度 css

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  9. web功能测试之表单、搜索测试

    初入职场接触功能测试老是碰到以下情况不知道怎么写测试用例: 一个界面很多搜索条件怎么写用例?下拉框测试如何考虑测试点?上传要考虑哪些验证点?...... 所以这篇主要是整理关于web测试之表单.搜索测 ...

随机推荐

  1. zabbix-3.0.4添加对windows 2008r2的监控

    zabbix-3.0.4添加对windows 2008r2的监控 一.windows客户端的配置关闭windows防火墙或者开通10050和10051端口(1).关闭防火墙(不推荐直接关闭,测试可以这 ...

  2. JavaScript 加解密库(crypto-js)

    1. 概述 1.1 说明 crypto-js(GitHub)是谷歌开发的一个纯JavaScript的加密算法类库,可以非常方便的在前端进行其所支持的加解密操作.目前crypto-js已支持的算法有:M ...

  3. 20)django-session使用

    一:目录 1)session原理 2)cookie与session对比 3)session配置 4)session使用 5)示例 二:session原理 Django的Session机制会向请求的浏览 ...

  4. 7)django-示例(cbv)

    CBV(class base view)一个url根据method方式调用相应的方法.method常用有get,post 如果是GET请求,Home类会调用get方法,如果是POST提交数据,则类会调 ...

  5. 洛谷P4859 已经没有什么好害怕的了 [DP，容斥]

    传送门 思路 大佬都说这是套路题--嘤嘤嘤我又被吊打了\(Q\omega Q\) 显然,这题是要\(DP\)的. 首先思考一下性质: 为了方便,下面令\(k=\frac{n+k}{2}\),即有恰好\ ...

  6. poj1562 Oil Deposits 深搜模板题

    题目描述: Description The GeoSurvComp geologic survey company is responsible for detecting underground o ...

  7. 手把手教你React Native 实战之开山篇《一》

    先说一下我为什么学习RN 18年3月29号,随着自己内心的欲望和冲动,任务交接了一下,正式离开一家医疗公司.第二天就入职了这之前已经找好的公司,由于自己对代码浓厚的热情,自己终于也不再带团队.正好有充 ...

  8. 如何打包/运行jar包,及生成exe文件

    关于如何打包/运行jar包,以及生成exe文件.之前各种查询.博客,终于搞明白究竟是咋回事.记得还做过笔记的.今天要打包生成exe用的时候,居然忘了咋怎来着.去查看之前的笔记,死活没找到(好像被删掉了 ...

  9. laravel 配置设置

    public function updateRegisterSetting(Request $request, Configuration $config) { $conf = $request-&g ...

  10. bzoj 2721

    题解:首先推一发式子(见csdn https://blog.csdn.net/lleozhang/article/details/83415995) 因为x是整数,所以x的数量显然为能使取得整数的t的 ...