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

news2024/11/28 12:39:44

实现使用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.coloradmin.cn/o/1603565.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Pytorch】Conv1d

conv1d 先看看官方文档 再来个简单的例子 import torch import numpy as np import torch.nn as nndata np.arange(1, 13).reshape([1, 4, 3]) data torch.tensor(data, dtypetorch.float) print("[data]:\n", data) conv nn.Conv1d(in_channels4, out_channels1…

ARM作业day8

温湿度数据采集应用&#xff1a; 由上图可知&#xff1a; 控制温湿度采集模块的引脚是PF14&#xff08;串行时钟线&#xff09;和PF15&#xff08;串行数据线&#xff09;&#xff1a;控制温湿度采集模块的总线是AHB4&#xff0c;通过GPIOF串口和RCC使能完成初始化操作。 控制…

批量插入10w数据方法对比

环境准备(mysql5.7) CREATE TABLE user (id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 唯一id,user_id bigint(10) DEFAULT NULL COMMENT 用户id-uuid,user_name varchar(100) NOT NULL COMMENT 用户名,user_age bigint(10) DEFAULT NULL COMMENT 用户年龄,create_time time…

ubuntu 查询mysql的用户名和密码 ubuntu查看username

ubuntu 查询mysql的用户名和密码 ubuntu查看username 文章标签mysqlUbuntu用户名文章分类MySQL数据库 一.基本命令 1.查看Ubuntu版本 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 16.04.5 LTS Release: 16.04 Coden…

HarmonyOS开发实例:【分布式手写板】

介绍 本篇Codelab使用设备管理及分布式键值数据库能力&#xff0c;实现多设备之间手写板应用拉起及同步书写内容的功能。操作流程&#xff1a; 设备连接同一无线网络&#xff0c;安装分布式手写板应用。进入应用&#xff0c;点击允许使用多设备协同&#xff0c;点击主页上查询…

接口压力测试 jmeter--入门篇(一)

一 压力测试的目的 评估系统的能力识别系统的弱点&#xff1a;瓶颈/弱点检查系统的隐藏的问题检验系统的稳定性和可靠性 二 性能测试指标以及测算 【虚拟用户数】&#xff1a;线程用户【并发数】&#xff1a;指在某一时间&#xff0c;一定数量的虚拟用户同时对系统的某个功…

如何使用 ArcGIS Pro 制作边界晕渲效果

在某些出版的地图中&#xff0c;边界有类似于“发光”的晕渲效果&#xff0c;这里为大家介绍一下如何使用ArcGIS Pro 制作这种晕渲效果&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的行政区划数据&#xff0c;除了行政区划数据&#xff0c…

【C++进阶】C++中的继承

一、概述 作为C的三大特性之一封装&#xff0c;继承&#xff0c;多态 中的继承&#xff0c;我们在进阶部分一定要详细说明。请跟着如下的小标题进入深度学习。 二、正文 1.继承的概念及定义 首先&#xff0c;我们先要知道什么是继承&#xff0c; 继承 (inheritance)机制是面…

Unity之OpenXR+XR Interaction Toolkit快速监听手柄任意按键事件

前言 当我们开发一个VR时,有时希望监听一个手柄按键的点击事件,或者一个按钮的Value值等。但是每次有可能监听的按钮有不一样,有可能监听的值不一样,那么每次这么折腾,有点累了,难道就没有一个万能的方法,让我可以直接监听我想要的某个按钮的事件么? 答案是肯定的,今…

vscode 搭建stm32开发环境记录(eide+cortex-debug+jlink)

前言 clion使用的快过期了&#xff0c;所以就准备使用vscode 来代替clion作为代码开发环境 vscode 插件安装 创建个空白工程 添加项目相关的源文件&#xff0c;和配置宏定义和头文件目录 编译和烧录(ok) 结合cortex-debug 结果(测试ok)

Prometheus + Grafana 搭建监控仪表盘

目标要求 1、需要展现的仪表盘&#xff1a; SpringBoot或JVM仪表盘 Centos物理机服务器&#xff08;实际为物理分割的虚拟服务器&#xff09;仪表盘 2、展现要求: 探索Prometheus Grafana搭建起来的展示效果&#xff0c;尽可能展示能展示的部分。 一、下载软件包 监控系统核心…

政安晨:【深度学习神经网络基础】(十一)—— 激活函数的导数以及在反向传播中的应用

目录 线性激活函数的导数 Softmax激活函数的导数 S型激活函数的导数 双曲正切激活函数的导数 ReLU激活函数的导数 如何在反向传播中应用 批量训练和在线训练 随机梯度下降 反向传播权重更新 选择学习率和动量 Nesterov动量 政安晨的个人主页&#xff1a;政安晨 欢迎…

2024年MathorCup数学建模C题物流网络分拣中心货量预测及人员排班解题文档与程序

2024年第十四届MathorCup高校数学建模挑战赛 C题 物流网络分拣中心货量预测及人员排班 原题再现&#xff1a; 电商物流网络在订单履约中由多个环节组成&#xff0c;图1是一个简化的物流网络示意图。其中&#xff0c;分拣中心作为网络的中间环节&#xff0c;需要将包按照不同流…

循环神经网络(RNN):概念、挑战与应用

循环神经网络&#xff08;RNN&#xff09;&#xff1a;概念、挑战与应用 1 引言 1.1 简要回顾 RNN 在深度学习中的位置与重要性 在深度学习的壮丽图景中&#xff0c;循环神经网络&#xff08;Recurrent Neural Networks&#xff0c;RNN&#xff09;占据着不可或缺的地位。自从…

C++如何使用string类

文章目录 为什么要学习string?库中的string关于编码ASCII编码Unicode编码 迭代器Iteratorsstring常用构造接口接口声明与功能说明接口演示 string类对象的容量操作接口声明与功能说明接口演示reverse与resize在不同平台下的扩容与缩容机制 string类对象的访问及遍历操作接口声…

stm32中的中断优先级

在工作中使用到多个定时器中断,由于中断的中断优先级不熟悉导致出错,下面来写一下中断的一些注意事项。 一、中断的分类 1、EXTI外部中断:由外部设备或外部信号引发,例如按键按下、外部传感器信号变化等。外部中断用于响应外部事件,并及时处理相关任务。 2、内部中断:…

3DGS渐进式渲染 - 离线生成渲染视频

总览 输入&#xff1a;环绕Object拍摄的RGB视频 输出&#xff1a;自定义相机路径的渲染视频&#xff08;包含渐变效果&#xff09; 实现过程 首先&#xff0c;编译3DGS的C代码&#xff0c;并跑通convert.py、train.py和render.py。教程如下&#xff1a; github网址&#xf…

如何安装 IntelliJ IDEA 最新版本——详细教程

IntelliJ IDEA 简称 IDEA&#xff0c;被业界公认为最好的 Java 集成开发工具&#xff0c;尤其在智能代码助手、代码自动提示、代码重构、代码版本管理(Git、SVN、Maven)、单元测试、代码分析等方面有着亮眼的发挥。IDEA 产于捷克&#xff0c;开发人员以严谨著称的东欧程序员为主…

利用大语言模型,矢量数据库实现数据库的智能搜索

目的 数据库使用SQL 语言查询数据&#xff0c;数据库的记录中要有一个关键字段&#xff08;通常称为主键字段&#xff0c;它的值在数据库列表中是唯一的&#xff09;,数据记录是结构化的. 如果你需要根据数据记录的内容来查询数据记录&#xff0c;就需要通过Select 语句在数据库…

SQL255 给出employees表中排名为奇数行的first_name

题目来源&#xff1a; 给出employees表中排名为奇数行的first_name_牛客题霸_牛客网 描述 对于employees表中&#xff0c;输出first_name排名(按first_name升序排序)为奇数的first_name CREATE TABLE employees ( emp_no int(11) NOT NULL, birth_date date NOT NULL, firs…