用layui实现下拉框多选,取值及赋值

来源:csdn博客 分类: 文章浏览史 发布时间:2020-11-27 11:00:10 最后更新:2020-11-27 浏览:116
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-11-27 11:00:10

首先需要的js及css,我是直接在官网上下载的

在这里插入图片描述
废话不多说,直接上代码

<!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" href="layui/layui.css">
<script src="layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="layui/formSelects-v4.css">
</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="layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/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>

不懂的方法可以看文档,里面都解释的很清楚,js和css里面都有下载地址
点击进入

php技术微信