layui 动态select二级联动

功能

  1. 可增删二级联动select
  2. select选项联动

界面

在这里插入图片描述

select 选项联动主要代码

# select 标签部署
<div>
	<label>语音标签1</label>
	<select lay-filter="selectType">
		# data-audio的值,与语音文件的name相关
		<option value="1" data-audio="1">语音标签1</option>
		<option value="2" data-audio="1">语音标签2</option>
		<option value="3" data-audio="1">语音标签3</option>
	</select>
	<label>语音文件1</label>
	<select name="audio[0]">
		<option value="1">语音1</option>
		<option value="2">语音2</option>
		<option value="3">语音3</option>
	</select>
</div>
<div>
	<label>语音标签2</label>
	<select lay-filter="selectType">
		# data-audio的值,与语音文件的name相关
		<option value="1" data-audio="2">语音标签1</option>
		<option value="2" data-audio="2">语音标签2</option>
		<option value="3" data-audio="2">语音标签3</option>
	</select>
	<label>语音文件2</label>
	<select name="audio[0]">
		<option value="1">语音1</option>
		<option value="2">语音2</option>
		<option value="3">语音3</option>
	</select>
</div>

# js 代码
###### -----------------------  
# 难点: 获取语音标签对应值中的"data-audio"属性的值
# data.elem.options[0].dataset.audio 
# options 的 “0” 值就是第一个option
###### -----------------------
form.on('select(selectType)', function(data) {
	let index = data.elem.options[0].dataset.audio;
	$('select[name="audio['+index+']"]').empty().append(new Option("请选择语音", ""));
})

这只适用于layui 的多个select 二级联动。


版权声明:本文为qq_28404381原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。