bootstrap下拉多选框

news2024/12/25 13:08:09

1、引用(引用资源下载)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="static/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="static/js/bootstrap-select.min.js"></script>

2、初始化

    $(window).on('load', function () {
        $('#fruittype').selectpicker({
            'selectedText': 'cat'
        });
    });

3、html代码

 <div class="form-group">
   <label class="col-sm-3 control-label">水果:</label>
	<div class="col-sm-7">
		<select id="fruittype" name="fruittype" class="selectpicker show-tick form-control" multiple data-live-search="false">
				<option value="0">苹果</option>
				<option value="1">菠萝</option>
				<option value="2">香蕉</option>
				<option value="3">火龙果</option>
				<option value="4">梨子</option>
				<option value="5">草莓</option>
				<option value="6">哈密瓜</option>
				<option value="7">椰子</option>
				<option value="8">猕猴桃</option>
				<option value="9">桃子</option>
		</select>
	</div>
  </div>

4、页面展示
在这里插入图片描述

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

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

相关文章

golang-开发工具及package

1. 开发工具 工欲善其事&#xff0c;必先利其器&#xff0c;我选择vscode&#xff0c;其它的工具比如goland也不错 下载地址&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 我的环境是是debian linux&#xff0c;所以我下载deb包&#xff0c;下载完成后&am…

CTFHub技能树-备份文件下载-vim缓存

目录 方法一&#xff1a;直接浏览器访问 方法二&#xff1a;使用kali恢复vim缓存文件 方法三&#xff1a;直接使用curl访问 最后同样备份文件系列的都可用dirsearch扫描 当开发人员在线上环境中使用 vim 编辑器&#xff0c;在使用过程中会留下 vim 编辑器缓存&#xff0c;当…

江科大/江协科技 STM32学习笔记P30

文章目录 一、FlyMcu串口下载1、串口下载的流程2、串口烧录的选项字节区 二、STLINK Utility 一、FlyMcu串口下载 1、串口下载的流程 例如机器人给自己换电池&#xff0c;需要拆掉旧电池再装上新电池&#xff0c;为了实现这个步骤需要再做一个小机器人&#xff0c;需要换电池时…

WinCC Modbus TCP 通信

概述 从版本WinCC V7.0 开始&#xff0c;WinCC支持Modbus TCP通讯&#xff0c;WinCC中的Modbus TCP驱动主要是针对施耐德PLC开发的&#xff0c;支持的PLC类型如下&#xff1a; 图1 本文档以Quantum CPU651和 Premium P57为例&#xff0c;介绍WinCC V7.2 的Modbus TCP通讯的组…

随手记:小程序体积超出2M包大小如何优化

小程序的包体积限制是2M&#xff0c;超出包大小如何优化 先简单列出&#xff0c;最近比较忙&#xff0c;后续优化明细&#xff0c;有着急的先留言踢我 1.分包 留几个主要的页面体积小的&#xff0c;剩下的在page.json中拆到subpackages中&#xff0c;简单举个例子 "page…

总结一下windows电脑字体模糊的优化方案

问题&#xff1a;谷歌浏览器上页面显示的字体非常细&#xff0c;有点费眼睛了&#x1f47e; 解决方案&#xff1a; 方案1&#xff1a;手动调整ClearType文本。方案2&#xff1a;英伟达显卡控制面板->管理3d设置->关闭全局平滑FXAA&#xff08;如果某个软件需要使用平滑处…

《‌黑神话:‌悟空》‌游戏攻略‌

时光荏苒&#xff0c;岁月如梭&#xff0c;不知不觉已经来到了2024年的9月份了。 ‌突然想写一篇关于《‌黑神话&#xff1a;‌悟空》‌的游戏攻略‌。 在《‌黑神话&#xff1a;‌悟空》‌这款以中国古代名著《‌西游记》‌为背景的动作角色扮演游戏中&#xff0c;‌玩家将扮…

J.U.C Review - 阻塞队列原理/源码分析

文章目录 阻塞队列的由来BlockingQueue的操作方法BlockingQueue的实现类ArrayBlockingQueueLinkedBlockingQueueDelayQueuePriorityBlockingQueueSynchronousQueue 阻塞队列原理深入分析1. 构造器和监视器初始化2. put操作的实现3. take操作的实现4. 注意事项小结 线程池中的阻…

泰克THDP0100(Tektronix)thdp0100高压差分探头详情资料

泰克 THDP0100 高压差分探头具有较大的差分动态范围功能&#xff0c;为用户提供了安全的高压测量探头解决方案。每个探头都配有两种尺寸的钩尖&#xff0c;并具有超范围视觉和声音指示器&#xff0c;当用户超出探头的线性范围时会发出警告。泰克 THDP0100 探头配备 TEkVPI 接口…

【vue css】css字体设置渐变色

实现的效果&#xff1a; 添加的代码&#xff1a; h2 {background-image: -webkit-linear-gradient(bottom, #1bffff, #ffffff);background-clip: text;//背景被裁剪成文字的前景色。-webkit-text-fill-color: transparent;//指定了文本字符的填充颜色。若未设置此属性&#xf…

【Linux操作系统】:Linux生产者消费者模型

目录 生产者消费者模型的概念 生产者消费者模型的特点 生产者消费者模型优点 基于BlockingQueue的生产者消费者模型 基于 BlockingQueue 的生产者消费者模型的概念 模拟实现基于阻塞队列的生产消费模型 生产者消费者模型的概念 生产者消费者模式就是通过一个容器来解决生…

MySQL Email验证流程详解:从注册到激活!

MySQL Email通知系统搭建教程&#xff01;如何从MySQL发送邮件&#xff1f; MySQL Email验证是一个至关重要的环节&#xff0c;它确保了用户注册过程的安全性和有效性。AokSend将详细介绍从用户注册到MySQL Email激活的完整流程&#xff0c;帮助开发者更好地理解和实现这一功能…

东风汽车将出席第五届中国新能源汽车热管理创新国际峰会

2024第五届中国新能源汽车热管理创新国际峰会将于11月14-15日在上海召开。峰会将汇聚来自全球的行业专家、学者、企业领袖及技术精英&#xff0c;共同探讨新能源汽车热管理领域的最新技术成果和发展趋势。 本次峰会将涵盖整车热管理系统构建、新能源商用车热管理、智能热管理系…

Python OpenCV 影像处理:傅立叶转换

►前言 上篇介绍基于计算影像的梯度&#xff0c;通过在影像中找到梯度值的变化来识别边缘。 本篇将介绍傅立叶变换的基本原理&#xff0c;了解傅立叶变换是如何将影像从空间域转换到频率域的&#xff0c;以及为什么这种转换在影像处理过程中是有用的。以及傅立叶变换的实际应…

9.3 k8s介绍

⼀、编排分类 单机容器编排: docker-compose 容器集群编排: docker swarm、mesosmarathon、kubernetes 应⽤编排: ansible(模块&#xff0c;剧本&#xff0c;⻆⾊) ⼆、系统管理进化史 1. 传统部署时代 早期&#xff0c;各个组织是在物理服务器上运⾏应⽤程序。 由于⽆法限…

getLocation:fail, the permission value is offline verifying

getLocation:fail, the permission value is offline verifying 后端会根据appid和secret生成 签名&#xff0c;前端wx配置时一定用appid来验证签名的正确 本次错误为配置初始化失败&#xff1a;前端与后端的appId不一致&#xff0c;我的失误也

TikTok直播为什么要用独立IP

TikTok直播作为一种受欢迎的社交媒体形式&#xff0c;吸引了越来越多的用户和内容创作者。在进行TikTok直播时&#xff0c;选择使用独立IP地址是一种被广泛推荐的做法。本文将探讨为什么在TikTok直播中更推荐使用独立IP&#xff0c;并解释其优势和应用。 独立IP是指一个唯一的互…

探索Linux项目自动化构建:make/Makefile的使用方法

&#x1f331;博客主页&#xff1a;青竹雾色间 &#x1f331;系列专栏&#xff1a;Linux &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞 ⭐收藏 ➕关注 标题&#xff1a; 使用 Makefile 实现项目自动化构建 - 从零开始学习 Makefile 摘要&#xff1a; Makefile 是一个用…

如何在 OpenCloudOS 上安装 OpenTenBase 数据库

OpenTenBase 是由开放原子开源基金会孵化及运营的开源项目&#xff0c;是一款企业级的分布式 HTAP 数据库&#xff0c;具备高扩展性、商业数据库语法兼容、分布式 HTAP 引擎、多级容灾和多维度资源隔离等能力&#xff0c;目前已经成功应用于金融、医疗、航天等诸多行业的核心业…

Github Coplit和Poe不再订阅,改用Token和LobeChat

优化AI使用方式 1.取消Poe和Github Coplit的年度订阅 今天把200$ 的Poe和100$的Github Coplit的年度订阅取消了&#xff0c;确保到期不会续定&#xff0c;包年用AI的时代&#xff0c;在这里结束了。 2.改用Token购买模式 使用的AI质量必须不变&#xff0c;改用Token的方式&…