问题描述,没有基本逻辑错误,但是点击无效,后来出现了一个新的问题,select选项渲染两次,原始的武无效,下面的可以触发,初步判断样式出了问题,根据正常的样式比较。layui 的form.on应该是生成新的覆盖原来或者隐藏原来的选项的触发点击事件。
JS代码如下:
layui.use(['form'], function () {
var form = layui.form;
//二次渲染 ,点击有效form.on 这里有效
layui.form.render();
alert(1112)
form.on('select(yd_ydld)', function (data) {
alert(2222)
});
form.on('select(yj_sgdd)', function (data) {
alert(3333)
let value = Number(data.value);
let name = data.elem.name;//获取名字(输出data的路径)
let htmlValue = data.elem[value].innerHTML;
console.log(name)
console.log(data)
});
});
JS中render()后会有两个选项,不render()form.on事件无效。可能其他的样式把.layui-form select 的 display: none;替换,因此需要改回去。
错误如下:
错误两个都可以选择,且互相渲染,但是form.on事件第一个上面无效。
解决关键CSS .layui-form select 的 display: none;
/* 隐藏原始的选择项,防止与form.om 冲突无效 */
.layui-form select {
display: none;
}
.layui-select-title{
position: relative;
top:0px;
height: 34px;
}
form HTML 如下
<form class="layui-form layui-colla-content layui-show" id="ydyj_form">
<!-- 拥堵地点路段 -->
<div class="layui-form layui-form-item" >
<label class="layui-form-label ">拥堵路段</label>
<div class="layui-form layui-input-block" id="ydld">
<select class="selcetoptions" lay-filter="yd_ydld" name="ydld">
<option value="">选择路段</option>
<option value="1">去地图获取路段起始点</option>
<option value="2">输入拥堵路段</option>
</select>
</div>
</div>
<!-- 拥堵等级 -->
<div class="layui-form layui-form-item">
<label class="layui-form-label ">拥堵等级</label>
<div class="layui-form layui-input-block" id="yddj">
<select class="selcetoptions" lay-filter="yj_yddj" name="yddj">
<option value="">选择等级</option>
<option value="1">轻度拥堵</option>
<option value="2">中度拥堵</option>
<option value="3">严重拥堵</option>
<option value="4">阻塞不通</option>
</select>
</div>
</div>
<!-- 拥堵诱因 -->
<div class="layui-form layui-form-item" id="ydyj_ydyy">
<label class="layui-form-label ">拥堵诱因</label>
<div class="layui-form layui-input-block" id="ydyy">
<select class="selcet-options" lay-filter="yj_ydyy" name="ydyy">
<option value="">选择原因</option>
<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>
</div>
</div>
<!-- 补充说明 -->
<div class="layui-form layui-form-item bcsm">
<label class="layui-form-label bcsmLable">补充说明</label>
<textarea placeholder="补充说明有关车辆,涉及部门" placeholder="" name="" class="Txet_bcsm"
cols="70" rows="12"></textarea>
</div>
<div class="layui-form-item">
<div class="layui-input-block to-bottom">
<button class="layui-btn layui-btn-primary text-white"
id="yj_yjyj_reset_btn" type="reset">重置表单
</button>
<button class="layui-btn" id="ydyj_tsxx" type="button">推送信息
</button>
</div>
</div>
</form>
注意render()的作用。理解如有错欢饮指出