layui下实现拉列表多选

最新推荐文章于 2024-08-08 07:24:14 发布

菜鸟1423

最新推荐文章于 2024-08-08 07:24:14 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： layui多选下拉列表

本文链接：https://blog.csdn.net/baidu_38715224/article/details/92849523

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接贴一个简单的demo：

1.首先去官网下载formSelects-v4对应的js和css，引入到本地，或者直接引入在线js文件，如下：

		<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css"/>
		<!-- 引入组件 -->
<script src="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>

2.举一个点单的demo，就直接贴代码了

<html>
	<head>
		<meta charset="UTF-8">
		<title>layui中拉框多选</title>
		
		<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css"/>
	</head>
	<body>
		<!-- 引入jquery依赖 -->
	<script src="//unpkg.com/jquery@3.3.1/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入组件 -->
	<script src="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
	<div>
			<select name="city" xm-select="selectId">
			    <option value="1" disabled="disabled">北京</option>
			    <option value="2" selected="selected">上海</option>
			    <option value="3">广州</option>
			    <option value="4" selected="selected">深圳</option>
			    <option value="5">天津</option>
			</select>
	</div>
	<script type="text/javascript">
			formSelects.render('selectId');
	</script>
	
	</body>
</html>