<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>select下拉选择框隐藏显示子项测试</title>
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-form">
<select name="city" lay-filter="citytype">
<option value="">请选择一个城市</option>
<option id="beijing" value="1">北京</option>
<option id="shanghai" value="2">上海</option>
<option id="hangzhou" value="3">杭州</option>
</select>
<select id="select_id" name="city2">
<!-- <option value="">请选择一个城市</option>
<option id="beijing2" value="1">北京</option>
<option id="shanghai2" value="2">上海</option>
<option id="hangzhou2" value="3">杭州</option> -->
</select>
</div>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
// 操作相关
layui.use(['form', 'layedit', 'laydate', 'element', 'jquery', 'layer'], function () {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
var element = layui.element;
var $ = layui.$ //重点处
form.on('select(citytype)', function (data) {
console.log(data.value); //得到被选中的值
layer.msg(data.value);
if (data.value == '2') {
appendOption(select_id, 0, "杭州");
appendOption(select_id, 1, "合肥");
appendOption(select_id, 2, "苏州");
}else{
clearOption("select_id");
}
});
// 定义追加select的option选项的函数 注意render更新渲染
function appendOption(select_id, value, name) {
$(select_id).append(
"<option value=" +
value +
">" +
name +
"</option>"
);
form.render('select'); //表单重新渲染,要不然添加完显示不出来新的option
}
// 清空option
function clearOption(select_id) {
alert("clearOption enter");
obj = document.getElementById(select_id);
for (i = obj.options.length - 1; i >= 0; i--){
obj.options[i] = null;
}
form.render(); //表单重新渲染,要不然添加完显示不出来新的option
}
});
</script>
</body>
</html>