我选择“其他“”的时候,下面弹出一个input输入框,供用户输入

就是我选择其他的时候,下面弹出一个input输入框
            <label class="layui-form-label">访客单位</label>
            <div class="layui-input-inline">
                <select name="modules" lay-verify="required" lay-search="">
                    <option value="1">京东方</option>
                    <option value="2">英业达</option>
                    <option value="3">富士康</option>
                    <option value="4">其他</option>
                </select>
            </div>
        </div>
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

添加select事件判断选中的值执行其他容器的显示隐藏,简单示例如下

img

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>自定义模块 - layui</title>

    <link rel="stylesheet" href="../src/css/layui.css">

    <style>
    </style>
</head>
<body>
    <form class="layui-form" method="get">
        <div class="layui-form-item">
            <label class="layui-form-label">访客单位</label>
            <div class="layui-input-inline">
                <select lay-filter="modules" name="modules" lay-verify="required" lay-search="">
                    <option value="1">京东方</option>
                    <option value="2">英业达</option>
                    <option value="3">富士康</option>
                    <option value="4">其他</option>
                </select>
            </div>
            <div class="layui-input-inline" style="display:none" id="dvOther"><input type="text" id="txtOther" class="layui-input" placeholder="其他请输入" /></div>
        </div>
    </form>

    <script src="../src/layui.js"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form, $ = layui.$;
            form.on('select(modules)', function (data) {
                $('#dvOther')[data.value == '4' ? 'show' : 'hide']();
            });

            form.render("select");
        });
    </script>
</body>
</html>


img

绑定js事件触发弹出输入框。

在‘其他’的option添加一个点击事件,一种是通过js在对应的位置添加一个输入框标签代码,另一个是通过js控制输入框的隐藏属性,当点击其他的时候解除hidden,这个时候输入框事先写在指定位置,绑定一个唯一id值,供js通过id找到对应的标签,从而修改属性

PS:除了在‘其他’的option添加一个点击事件,也要在这三个地方添加点击事件,因为你选择其他之后,如果在选择这些选择框需要将之前的hidden隐藏属性加上,使其添加的输入框隐藏

<option value="1">京东方</option>
<option value="2">英业达</option>
<option value="3">富士康</option>
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632