<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
jQuery ySelect Plugin Demo
</title>
<script src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/ySelect.css" rel="stylesheet" type="text/css">
<script src="js/bootstrap.min.js"></script>
<script src="js/ySelect.js"></script>
</head>
<body>
<div class="container">
<select id='m1' class="demo" multiple="multiple">
<optgroup label="产品">
<option value="1">
加多宝凉茶
</option>
<option value="2">
饮料
</option>
<option value="3">
太太乐鸡精
</option>
<option value="4">
嘉士伯啤酒
</option>
</optgroup>
<optgroup label="字典">
<option value="5">
成功图像类型
</option>
<option value="6">
门店类型
</option>
<option value="7">
终端类型
</option>
</optgroup>
</select> <select id='m2' class="demo1" multiple="multiple">
<option value="1">
加多宝凉茶
</option>
<option value="2">
饮料
</option>
<option value="3">
太太乐鸡精
</option>
<option value="4">
嘉士伯啤酒
</option>
<option value="5">
成功图像类型
</option>
<option value="6">
门店类型
</option>
</select><br>
<button id="current" class="btn btn-primary btn-sm">查看值</button>
</div>
<script>
$(function () {
$('.demo').ySelect();
$('.demo1').ySelect(
{
placeholder: '请先选择一些项目',
searchText: '搜索',
showSearch: true,
numDisplayed: 4,
overflowText: '已选中 {n}项',
isCheck: false
}
);
$("#current").click(function () {
alert($("#m1").ySelectedValues(","));
alert($("#m1").ySelectedTexts(","));
});
});
</script><!--这行代码可以删除-->
</body>
</html>
jQuery插件-多选全选实时搜索下拉框
需积分: 47 15 浏览量
2022-02-23
15:58:43
上传
评论 2
收藏 14KB RAR 举报
多级多选下拉框插件.rar （5个子文件） 
多级多选下拉框插件1 css 
ySelect.css 3KB js ySelect.js 7KB jquery-1.10.2.js 298B bootstrap.min.js 35KB
index.html 3KB
代码小白白白~
- 粉丝: 0
- 资源: 1
评论0