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

<!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. postgresql 触发器 更新操作

    1 前言 功能需求:当一张表格某个字段变化,另一张表某个字段写入该值 2 代码 CREATE OR REPLACE FUNCTION "public"."synStatu ...

  2. C#生成Excel保存到服务器端并下载

    using MongoDB.Bson; using Newtonsoft.Json.Linq; using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; ...

  3. 洛谷P4707 重返现世 [DP，min-max容斥]

    传送门 前置知识 做这题前,您需要认识这个式子: \[ kthmax(S)=\sum_{\varnothing\neq T\subseteq S}{|T|-1\choose k-1} (-1)^{|T ...

  4. linux学习之uniq

    uniq最经常用的是统计次数,通常先排序,然后uniq  -c cat a.txt |sort -nr |uniq -c

  5. 新版Go2Shell 安装详解

    Go2Shell 下载地址 https://zipzapmac.com/Go2Shell 安装说明 1,首先下载好程序,然后运行到下面界面 2 然后将程序拖到下面位置 3,然后执行install Go ...

  6. Linux 用户（user）和用户组（group）管理概述

    一.理解Linux的单用户多任务,多用户多任务概念: Linux 是一个多用户.多任务的操作系统:我们应该了解单用户多任务和多用户多任务的概念: 1.Linux 的单用户多任务:单用户多任务:比如我们 ...

  7. D3.js 添加zoom缩放功能后dblclick双击也会放大的问题

    svg.call(zoom).on("dblclick.zoom", null); https://stackoverflow.com/questions/25007466/d3- ...

  8. Linux 编程笔记（三）

    上一章节对文件的基本属性做了一个笔记,续上次笔记对Linux文件的属性和属性组做一笔记 我安装的是虚拟机操作系统的版本还KaliLinux但是系统启动速度拖延,所以刚开始还是配置Centos 1.Li ...

  9. matlab提取wind底层数据库操作

    首先需要安装navicat for SQL server 软件, 为了实现Matlab 通过JDBC方式连接Sqlserver数据库, 需要安装Sqlserver JDBC驱动. 地址: https: ...

  10. Python继承、方法重写

    继承 在编写类时,并不是每次都要从空白开始.当要编写的类和另一个已经存在的类之间存在一定的继承关系时,就可以通过继承来达到代码重用的目的,提高开发效率. class one(): "&quo ...