使用formSelects v4制作多选下拉框（基于layui和jquery3.4）

最新推荐文章于 2024-06-06 17:22:59 发布

月夜流心

最新推荐文章于 2024-06-06 17:22:59 发布

阅读量925

点赞数 1

文章标签：前端 layui 多选下拉框

本文链接：https://blog.csdn.net/qq_33883147/article/details/101619692

版权

项目需求要做一个多选下拉框
由于项目使用layui制作，所以翻遍了CSDN也没找到合适的
现使用formSelects这个插件可以完成，下面是demo，同时附上对应的js和css，不会搞csdn的下载，对应文件版权归原作者所有
注意，jquery和layui的js和css不能缺少，否则会失效！
另：formSelects插件已经全新升级，有兴趣请自行百度

官方文档地址

https://hnzzmsf.github.io/example/example_v4.html

下面是html例子，正确引入formselectv4即可

<!DOCTYPE html>
<html>
<head>
<title>layui下拉框多选</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<link rel="stylesheet" type="text/css" href="layui-v2.5.4/css/layui.css"/>
<link rel="stylesheet" href="formSelects-v4.css">
<script src="layui-v2.5.4/layui.all.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div style="padding: 20px; height: 600px;">
		<form class="layui-form" action="">
			<div style="width: 300px; display: inline-block; margin-right: 10px;">
				<select name="city" xm-select="method-value-example1">
					<option value="1" >北京</option>
					<option value="2" >上海</option>
					<option value="3">广州</option>
					<option value="4" >深圳</option>
					<option value="5">天津</option>
				</select>
			</div>
		</form>
		<button class="layui-btn"
			onclick="on()">获取已选中数据的字符串值</button>
	</div>
</body>
<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var formSelects = layui.formSelects;
</script>
<script>
	formSelects.value('method-value-example1', ['2','4']);//赋值选中，为option的value值，数组形式，给上海和深圳选中
</script>
<script>
function on(){
	var a=JSON.stringify(formSelects.value('method-value-example1', 'valStr'));//值为2,4（选中为上海，深圳）
	alert(a);
}
</script>
</html>

月夜流心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用formSelects v4制作多选下拉框（基于layui和jquery3.4）

项目需求要做一个多选下拉框由于项目使用layui制作，所以翻遍了CSDN也没找到合适的现使用formSelects这个插件可以完成，下面是demo，同时附上对应的js和css，不会搞csdn的下载，对应文件版权归原作者所有注意，jquery和layui的js和css不能缺少，否则会失效！另：formSelects插件已经全新升级，有兴趣请自行百度<!DOCTYPE html>...
复制链接

扫一扫