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

<!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. Python2018-列表的相关操作

    列表中存放的数据是可以进行修改的,比如"增"."删"."改" .“查” "增"-----append, extend, ...

  2. git pull/fectch

    git remote: show all remote repositories git push -u <X1> <>: set x1 as the default repo ...

  3. 04 if条件判断 流程控制

    条件判断 if 语法一: if 条件: # 条件成立时执行的子代码块 代码1 代码2 代码3 示例: sex='female' age=18 is_beautiful=True if sex == ' ...

  4. 小白6步搞定vue脚手架创建项目

    1.安装node及npm node -v (测试node是否安装成功)npm -v(测试npm是否安装成功) 2.安装cnpm npm install -g cnpm --registry=http: ...

  5. vue入手

    https://www.jianshu.com/p/dc5057e7ad0d    (最全入坑教程) http://doc.liangxinghua.com/vue-family/1.4.html(v ...

  6. 声明寄存器ROM

    :] ROM [:] ; integer i; initial begin ;i<=;i=i+) begin ROM[i] <= {{'b0}}; end end 同时可以考虑双端口ROM ...

  7. SpringBoot集成前端模版（thymeleaf）

    1.在application.properties配置文件中添加 thymeleaf 的配置信息 spring.datasource.driverClassName=com.mysql.jdbc.Dr ...

  8. 拓展中国剩余定理（ex_crt）

    一般来讲,crt(中国剩余定理)比较常见,而ex_crt(拓展中国剩余定理)不是很常用 但是noi 2018偏偏考了这么个诡异的东西... 所以这里写一个ex_crt模板 模型: 求一个x满足上述方程 ...

  9. 支付宝（查询对账单下载地址（alipay.data.dataservice.bill.downloadurl.query））

    通过url下载zip对账单文件,进行解压,读取压缩文件内容. import java.io.BufferedOutputStream; import java.io.BufferedReader; i ...

  10. centos--git搭建之Gogs安装

    1.下载git yum intall -y git 2. 创建git用户(必须新创建git用户, 用root用户会导致无法下载) #创建git用户 sudo adduser git #给git用户设置 ...