layui中找到select下当前选中的option值给其添加样式
以我的代码为例,代码中赋其对应的注释,仔细看就能看懂,希望能给大家带来帮助!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layui</title>
<link rel="stylesheet" href="./css/layui.css">
</head>
<body>
<div class="layui-form" style="width:200px;">
<select name="status" lay-verify="">
<option value="">---请选择---</option>
<option value="0" selected>正常</option>
<option value="1">不正常</option>
</select>
<select name="checkstatus" lay-verify="">
<option value="">---请选择---</option>
<option value="0">阴性(-)</option>
<option value="1" selected>阳性()</option>
</select>
</div>
<script>
layui.use(['jquery', 'form', 'layer'],function() {
$ = layui.jquery;
var form = layui.form,
layer = layui.layer;
//页面初始化的时候获取到当前选中的option,根据其option的value值给选中的option的值添加颜色。
$("select").each(function() {
let selects = $(this);
let selectValue = selects.val()
if (selectValue == 1) {
selects.next().find('input').css("color", "red");
} else {
selects.next().find('input').css("color", "black");
}
});
//监听select的事件,点击select下拉框选取option的值给其添加样式
form.on('select', function(data) {
if (data.value == 1) {
$(data.elem).next().find('input').css("color", "red");
} else {
$(data.elem).next().find('input').css("color", "black");
}
});
}
)
</script>
<script src="./layui.js"></script>
</body>
</html>