layui 中控制select 的option选项的显示和隐藏

最新推荐文章于 2024-05-15 23:29:45 发布

xw-何妨吟啸且徐行

最新推荐文章于 2024-05-15 23:29:45 发布

阅读量3.2k

点赞数 2

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/xuw_xy/article/details/118027455

版权

js-qt 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

<!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>

xw-何妨吟啸且徐行

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
layui 中控制select 的option选项的显示和隐藏

<!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.
复制链接

扫一扫