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

<!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. ubuntu中文版man

    man默认是英文的,但ubuntu的源里也有中文版的.以下是配置方法: 1)  终端输入sudo apt-get install manpages-zh 2)  安装后修改配置文件sudo gedit ...

  2. Ex3_28 在2SAT问题中,给定一个字句的集合..._第十二次作业

    参考答案 ----------------------------------------------------------------------------------------------- ...

  3. su命令

    作用: 切换 用户 选项: -:可以更改当前目录为切换用户的家目录 使用: # 切换用户,当前所在用户目录不变 su 用户名 # 切换用户,当前所在目录改为切换对象的家目录 /home/用户名 su ...

  4. 如何去掉li标签的重叠边框

    当我们的li标签设置了border的时候就会出现重叠边框,如何去掉呢,见代码 html代码 <ul class="friendLink_list"> <li> ...

  5. 18)django-模板的过滤器和tag，自定义simple_tag和filter

    模板过滤器是在变量被显示前修改它的值的一个简单方法. 过滤器使用管道字符 . 模板标签(template tag) .标签(tag)定义比较明确,即: 仅通知模板系统完成某些工作的标签.  一:dja ...

  6. AES加解密程序的实现

    AES加解密程序的实现正常情况,用户不能访问sys.dbms_crypto,需要DBA授权:grant execute on dbms_crypto to crm;建立加解密的PKG_AES包:CRE ...

  7. centos6.5 有趣但是没有用的linux命令

    小火车 get http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm rpm -ivh epel-rele ...

  8. 【进阶3-4期】深度解析bind原理、使用场景及模拟实现（转）

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记  https://github.com/yygmind/blog/issues/23 bind() bind() 方法会创建一个新函数,当这个新函 ...

  9. Oracle11g 启动数据库实例、关闭数据库实例

    Oracle11g 启动数据库实例        startup 1: nomount 模式:      描述:             该模式只会创建实例(即:创建oracle 实例的各种内存结构和 ...

  10. restricted 模式及其 使用

    什么是数据库的RESTRICTED 模式 注:以下内容来至:百度知道 --数据库受限模式,在这个模式下只有RESTRICTED SESSION 权限的人才可以登陆,一般用与数据库维护的时候使用. RE ...