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

<!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. mac 上如何安装非app store上的下载的软件-------打开未知来源

    打开了 Terminal 终端后 ,在命令提示后输入 sudo spctl --master-disable 并按下回车执行,如下图所示.   随后再输入当前 Mac 用户的密码,如下图所示.   如 ...

  2. Android调试adb devices找不到设备【转】

    adb驱动已经安装成功,但是adb devices却无法找到设备,USB大容量存储也是正常: 以前如果出现此种情况,我能想到的原因如下: 1.杀毒软件问题(关闭MacAfee) 2.驱动安装有误,重新 ...

  3. windows被入侵检测

    1.net user 查看当前有哪些用户 2.net localgroup administrators 查询administrators最高权限组有哪些用户 3.net user administr ...

  4. Windows上的程序员神器Cmder

    用过Windows版本Git的都知道Git自带了Git Bash,这个在很大程度上满足了我的需求,随着Git的版本升级越来越好用 安装Cmder Cmder官网,它把conemu,msysgit和cl ...

  5. 《剑指offer》旋转数组中的最小数字

    本题来自<剑指offer> 旋转数组中的最小数字 题目: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例 ...

  6. C# Parallel并发执行相关问题

    1.Parallel并发执行 using System;using System.Collections.Generic;using System.Linq;using System.Text;usi ...

  7. Java将文件中的内容转换为sql语句(和并发定时读取文件)

    数据文件内容data.txt {USER_TYPE=1,CREATE_USER=ZHANG,UPDATE_USER=li,OPER_NUM=D001,SRC=2,UPDATE_TIME=2018-11 ...

  8. C++ GetComputerName()

    关于函数“GetComputerName()”,参考:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724295(v=vs.85 ...

  9. shiro 单点登录原理 实例

    原创 2017年02月08日 17:39:55 4006 Shiro 1.2开始提供了Jasig CAS单点登录的支持,单点登录主要用于多系统集成,即在多个系统中,用户只需要到一个中央服务器登录一次即 ...

  10. 论文阅读笔记三十二：YOLOv3: An Incremental Improvement

    论文源址:https://pjreddie.com/media/files/papers/YOLOv3.pdf 代码:https://github.com/qqwweee/keras-yolo3 摘要 ...