Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能
地址:https://harvesthq.github.io/chosen/
效果:
因为只需要这个功能,就只研究这个功能了,代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
<!-- <link rel="stylesheet" href="docsupport/style.css"> -->
<!-- <link rel="stylesheet" href="docsupport/prism.css"> -->
<link rel="stylesheet" href="chosen.css"> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://ajax.googleapis.com; style-src 'self'; img-src 'self' data:"> </head>
<body>
<form>
<em>Into This</em>
<select data-placeholder="Choose a Country..." class="chosen-select" multiple tabindex="4">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
</select>
<script src="docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>
</form>
</body>
</html>
以上js和css都要引入才可以
如果select的option是动态生成的 如:
function getzhr() {
jQuery.support.cors = true;//ie请求数据
$.ajax({
url:‘’',
type: 'post',
async: true,
data: {},
dataType: 'json',
success: function (res) {
if (!res['MSG']) {
tbzhr = res['data'];
if(!tbzhr){}
else{
var zhroption='';
$(".chosen-select").html("");
for(var i=0;i<tbzhr.length;i++){
zhroption+='<option value="'+tbzhr[i]['name']+'">'+tbzhr[i]['name']+'</option>';
}
$(".chosen-select").append(zhroption);
$(".chosen-select").trigger("chosen:updated");
$(".chosen-container").attr("style"," min-width: 400px;max-width:550px;");
}
}
},
error: function (res) { }
});
}
因为引入了以后发现生成的宽度始终是0,所以加载完了以后重新设置了宽度(注意如果需要图标,需要修改chosen.css 对应图标路径):
如果select是动态生成的,
$(".chosen-select").chosen();//需要先初始化
$(".chosen-select").append(zhroption) ;//然后再赋值
$(".chosen-select").trigger("chosen:updated");
$(".chosen-container").attr("style", " width:100%");
Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能的更多相关文章
- 自定义实现 PyQt5 下拉复选框 ComboCheckBox
一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...
- 同上! 下拉复选框 点击当前的checkbox 选中后面li 添加到指定区域
(function() { $(".cxbtntj").click(function(){ console.log($("#jsLi1").attr(" ...
- finereport 下拉复选框多选
- 我的第一个jquery插件:下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
- jQuery插件:模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- angular2.x 下拉多选框选择组件
angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云 链接: ...
- 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- 自己用ul模拟实现下拉多选框,
模拟实现下拉多选框 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- 【转载】linux 设备管理器 图形hardinfo 字符 lshw lspci
在ubuntu中怎样启动类似windows中的 设备管理器 sudo apt-get install hardinfo lspci sudo lshw everestubuntu下的"设备管 ...
- 【转载】8.2.1 CPU性能测试工具
(KVM连载) 8.2.1 CPU性能测试工具 01/08/2013master 1 Comment 8.2.1 CPU性能测试工具 CPU是计算机系统中最核心的部件,CPU的性能直接决定了系统的计算 ...
- Linux_yum命令详解
一.yum命令语法 yum [options] [command] [package ...] 二.yum命令常用的选项: yum options -y //自动回答为"yes" ...
- ar是System Activity Reporter(系统活动情况报告)的缩写。这
ar是System Activity Reporter(系统活动情况报告)的缩写.这个工具所需要的负载很小,也是目前linux中最为全面的性能分析工具之一.此款工具将对系统当前的状态就行取样,然后通过 ...
- dpkg -S /usr/lib/mate-notification-daemon/mate-notification-daemon
# dpkg -S /usr/lib/mate-notification-daemon/mate-notification-daemonmate-notification-daemon: /usr/l ...
- DOCKER学习_011:使用Dockerfile制作docker镜像
前面使用commit的方式,制作一个docker镜像,本次介绍使用Dockerfile制作一个dockers镜像 [root@docker-server3 ~]# mkdir /openssh [ro ...
- pre -regulator 前端稳压器
regulator
- cgic: CGI的C函数库-(转自COS)
下载回源码包以后,就3个文件:cgic.c 函数库capture.c 一个很简单的CGI例子,仅仅输出两行提示文字cgictest.c 一个演示读取form表单数据的CGI例子 首先在 ...
- CoSky 高性能 服务注册/发现 & 配置中心
CoSky 基于 Redis 的服务治理平台(服务注册/发现 & 配置中心) Consul + Sky = CoSky CoSky 是一个轻量级.低成本的服务注册.服务发现. 配置服务 SDK ...
- Scrapy的Request和Response
Scrapy的Request和Response 本文链接:https://blog.csdn.net/kissazhu/article/details/80865773 上节课我们学习了中间件,知 ...