html select 支持内容过滤列表 -bootstrap实现

实现使用bootstrap-select插件

http://silviomoreto.github.io/bootstrap-select

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
  <title>jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com</title>
  <script src="../../js/jquery-1.9.1.js"></script>
  <!-- 3.0 -->
  <link rel="stylesheet" href="../../js/bootstrap/bootstrap.css">
  <script src="../../js/bootstrap/bootstrap.min.js"></script>
  <script src="../../js/bootstrap/bootstrap-select.js"></script>
  <link rel="stylesheet" href="../../js/bootstrap/bootstrap-select.css">


  <script type="text/javascript">
    $(window).on('load', function () {

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

      // $('.selectpicker').selectpicker('hide');
    });
  </script>


</head>
<body>
<div class="container">
  <form class="form-horizontal" role="form1">
    <div class="form-group">
      <label for="bs3Select" class="col-lg-2 control-label">Test bootstrap 3 选择器form</label>
      <div class="col-lg-10">
        <select id="bs3Select1" class="selectpicker show-tick form-control" multiple data-live-search="true">
   <option value="cowVal">cow</option>
          <option value="1">bull</option>
          <option class="get-class" disabled>ox</option>
          <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
            <option value="2">ASD</option>
            <option value="3" selected>Bla</option>
            <option value="4">Ble</option>
            <option value="5">8送洗Ble</option>
        </select>
      </div>
    </div>
  </form>
</div>

<!--<label for="id_select">选择器Test label YEag</label>
<select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">
  <option>cow</option>
  <option>bull</option>
  <option class="get-class" disabled>ox</option>
  <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
  </optgroup>
</select>


<div class="container">
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="bs3Select" class="col-lg-2 control-label">Test bootstrap 3 选择器 单选</label>
      <div class="col-lg-10" id="selectsig">
        <select class="selectpicker show-tick form-control" data-live-search="true"
                tittle="选择器单选">
          <option>cow 固定</option>
          <option>bull</option>
          <option>ASD</option>
          <option>Bla</option>
          <option>Ble</option>
        </select>
      </div>

    </div>
  </form>
</div>-->
<button id='reset'>重置</button>


</body>
<script type="text/javascript">
  function reset() {
    $('.selectpicker').val('cowVal');
    $('.selectpicker').selectpicker('render');
    console.log('END')
  }

  $(() => {
    $('#reset').on('click', () => {
      reset()
    })
  })


</script>
</html>

重置选择值时,需要手动调用(‘render’)要不会造成网页刷新

 $('.selectpicker').val('cowVal');
    $('.selectpicker').selectpicker('render');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/560502.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

部署ELFK+zookeeper+kafka架构

目录 前言 一、环境部署 二、部署ELFK 1、ELFK ElasticSearch 集群部署 1.1 配置本地hosts文件 1.2 安装 elasticsearch-rpm 包并加载系统服务 1.3 修改 elasticsearch 主配置文件 1.4 创建数据存放路径并授权 1.5 启动elasticsearch是否成功开启 1.6 查看节点信息 …

面试不慌张:一文读懂FactoryBean的实现原理

大家好&#xff0c;我是石头~ 在深入探讨Spring框架内部机制时&#xff0c;FactoryBean无疑是一个关键角色&#xff0c;也是面试中经常出现的熟悉面孔。 不同于普通Java Bean&#xff0c;FactoryBean是一种特殊的Bean类型&#xff0c;它的存在并非为了提供业务逻辑&#xff0c;…

使用Python进行自动化测试

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 如何使用Python进行自动化测试&#xff1a;测试框架的选择与应用 自动化测试是软件开发过程…

代码随想录算法训练营DAY28|C++回溯算法Part.4|93.复原IP地址、78.子集、90.子集II

文章目录 93.复原IP地址思路确定非法的范围树形结构 伪代码 78.子集思路伪代码实现CPP代码 90.子集II思路CPP代码用used去重的办法用set去重的版本不使用used数组、set的版本 93.复原IP地址 力扣题目链接 文章讲解&#xff1a;93.复原IP地址 视频讲解&#xff1a;回溯算法如何分…

curlftpfs和fusermount

curlftpfs 是一种 Linux 系统下用来将 FTP 服务器挂载为文件系统的工具&#xff0c;这意味着可以通过本地目录来访问和操作 FTP 服务器上的文件。 挂载FTP服务器到本地系统 为了挂载FTP服务器到本地系统中&#xff0c;使用curlftpfs工具&#xff0c;可以按照以下格式书写命令…

如何通过MSTSC连接Ubuntu的远程桌面?

正文共&#xff1a;666 字 12 图&#xff0c;预估阅读时间&#xff1a;1 分钟 前面我们介绍了如何通过VNC连接Ubuntu 18.04的远程桌面&#xff08;Ubuntu 18.04开启远程桌面连接&#xff09;&#xff0c;非常简单。但是有小伙伴咨询如何使用微软的远程桌面连接MSTSC&#xff08…

黑灰产行业简介

参考&#xff1a;2021年黑灰产行业研究及趋势洞察报告 1. 有哪些场景面临大量黑灰产攻击&#xff1f; 1.营销活动场景 -- 该场景最为猖獗 1. 抹机及接码注册&#xff1a;黑灰产会使用抹机工具修改设备参数伪装成一台新设备&#xff0c;再配合联系卡商进行手机号接码&#xf…

项目7-音乐播放器3(删除模块+播放音乐模块设计)

1.播放音乐模块设计 1.1 请求响应设计 请求&#xff1a; { get, /music/get?pathxxx.mp3 } 响应&#xff1a; { 音乐数据本身的字节信息 } 1.2 后端代码 1. Files.readAllBytes(String path) : 读取文件中的所有字节&#xff0c;读入内存 &#xff…

java/C#语言开发的医疗信息系统10套源码

java/C#语言开发的医疗信息系统10套源码 云HIS系统源码&#xff0c;云LIS系统源码&#xff0c;PEIS体检系统&#xff0c;手麻系统 源 码&#xff0c;PACS系统源码&#xff0c;微源预约挂号源码&#xff0c;医院绩效考核源码&#xff0c;3D智能导诊系统源码&#xff0c;ADR药物…

UE5(基础动作)多人游戏制作蹲伏

1.创建输入操作&#xff0c;IA_Crouch 在输入映射中添加 IA_Crouch,在触发器中创建两个索引&#xff0c;已按下已松开来创建蹲伏输入。 蹲伏操作必须要勾选角色-角色移动-crouch勾选可蹲伏否则你的人物无法真正蹲下。 为蹲伏创建函数&#xff0c;创建布尔来判断是否蹲伏。 通过…

链表经典算法OJ题目

1.单链表相关经典算OJ题目1&#xff1a;移除链表元素 思路一 直接在原链表里删除val元素&#xff0c;然后让val前一个结点和后一个节点连接起来。 这时我们就需要3个指针来遍历链表&#xff1a; pcur —— 判断节点的val值是否于给定删除的val值相等 prev ——保存pcur的前…

LCR 023. 相交链表

给定两个单链表的头节点 headA 和 headB &#xff0c;请找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回结果后&#xf…

大话设计模式-装饰器模式

大话设计模式书中&#xff0c;作者举了一个穿衣服的例子来为我们引入装饰器模式。 概念 定义 装饰模式在书中的定义是&#xff1a;动态地给一个对象添加一些额外的职责&#xff0c;就增加功能来说&#xff0c;装饰模式比生成子类更灵活。 这句话直接去理解可能会有点抽象&#…

javase__进阶 day13stream流和方法引用

1.不可变集合 1.1 什么是不可变集合 ​ 是一个长度不可变&#xff0c;内容也无法修改的集合 1.2 使用场景 ​ 如果某个数据不能被修改&#xff0c;把它防御性地拷贝到不可变集合中是个很好的实践。 ​ 当集合对象被不可信的库调用时&#xff0c;不可变形式是安全的。 简单…

java:Java中的抽象类

什么是抽象类&#xff1a; 我们知道&#xff0c;类用来模拟现实的事物&#xff0c;一个类模拟一类事物&#xff0c;某个类的一个实例化对象可以模拟某个属于该类的具体事物。类中描绘了该类所有对象的共同的特性&#xff0c;当一个类中给出的信息足够全面时候&#xff0c;我们就…

如何从零开始创建React应用:简易指南

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

【大模型应用极简开发入门(1)】LLM概述:LLM在AI中所处位置、NLP技术的演变、Transformer与GPT、以及GPT模型文本生成逻辑

文章目录 一. AI中大语言模型的位置与技术发展1. 从AI到Transformer2. NLP&#xff1a;自然语言处理3. LLM大型语言模型&#xff1a;NLP的一种特定技术3.1. LLM定义3.2. LLM的技术发展3.2.1. n-gram模型3.2.2. RNN与LSTM 二. Transformer在LLM中脱颖而出1. Transformer架构能力…

【Linux】详解进程通信中信号量的本质同步和互斥的概念临界资源和临界区的概念

一、同步和互斥的概念 1.1、同步 访问资源在安全的前提下&#xff0c;具有一定的顺序性&#xff0c;就叫做同步。在多道程序系统中&#xff0c;由于资源有限&#xff0c;进程或线程之间可能产生冲突。同步机制就是为了解决这些冲突&#xff0c;保证进程或线程之间能够按照既定…

sketchup创建3D打印机的模型

查了一下&#xff0c;这玩意有几个版本&#xff0c;其中一个sketchup free是免费的&#xff0c;到官网上看看 下载 SketchUp | 免费试用 3D 建模软件 | SketchUp 是个在线网页版&#xff0c;然后可以再这个网站上注册一个账号 弄个邮箱试试看 创建好进入后&#xff0c;里面就…

解锁多智能体路径规划新境界:结合启发式搜索提升ML本地策略

引言&#xff1a;多智能体路径寻找&#xff08;MAPF&#xff09;问题的重要性与挑战 在现代自动化和机器人技术迅速发展的背景下&#xff0c;多智能体路径寻找&#xff08;Multi-agent path finding&#xff0c;简称MAPF&#xff09;问题的研究变得日益重要。MAPF问题涉及为一…
最新文章