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

news/2024/9/25 4:23:44/
htmledit_views">

实现使用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.ppmy.cn/news/1427327.html

相关文章

SQLite轻量级会话扩展(三十四)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite R*Tree 模块&#xff08;三十三&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 1. 引言 会话扩展提供了一种方便记录的机制 对 SQLite 数据库中某些表的部分或全部更改&#xff0c;以及 将这些…

【代理模式】静态代理-简单例子

在Java中&#xff0c;静态代理是一种设计模式&#xff0c;它涉及到为一个对象提供一个代理以控制对这个对象的访问。静态代理在编译时就已经确定&#xff0c;代理类和被代理类会实现相同的接口或者是代理类继承被代理类。客户端通过代理类来访问&#xff08;调用&#xff09;被…

linux离线安装mysql

一、下载mysql 地址&#xff1a;MySQL 这里选择64为还是32为要根据操作系统来 uname -m 二、上传解压配置mysql 使用root账户登录linux服务器&#xff0c;在opt文件下创建mysql文件夹 cd /opt sudo mkdir mysql 使用Xftp上传mysql压缩包到此文件夹下(自行决定路径) cd mysql/…

计算机网络 -- 多人聊天室

一 程序介绍和核心功能 这是基于 UDP 协议实现的一个网络程序&#xff0c;主要功能是 构建一个多人聊天室&#xff0c;当某个用户发送消息时&#xff0c;其他用户可以立即收到&#xff0c;形成一个群聊。 这个程序由一台服务器和n个客户端组成&#xff0c;服务器扮演了一个接受…

React中Toast 库推荐

react-hot-toast介绍 react-hot-toast是一个为 React 应用打造的轻量级、高度可定制的通知库。它不仅易于使用&#xff0c;而且默认样式美观&#xff0c;能够为 Web应用提供流畅的用户体验。可配置自定义操作&#xff0c;提示框持续时间&#xff0c;文本样式&#xff0c;图表样…

二叉树的层序遍历与深度遍历

二叉树 今天学习并回顾了二叉树&#xff0c;对其基本算法进行了重写。如有可优化的地方&#xff0c;欢迎指正&#xff01;代码均在Leetcode上跑过了。 层序遍历(Leetcode102题) 由于用前面写算法都是用C语言写的&#xff0c;像栈、队列每次都得手敲一遍。这里为了简化代码&a…

【网站项目】党员之家服务系统小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

OJ:数字三角形(搜索)

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;每日一练 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f337;1.问题描述&#xff1a; ⛳️题目描述&#xff1a; 示出了一个数字三角形。 请编一个程序计算从顶至底的某处的一条路…