layui中使用JavaScript监听下拉框（select）的变化，根据选中的值来决定是否显示或隐藏input元素-Toy模板网

这篇具有很好参考价值的文章主要介绍了layui中使用JavaScript监听下拉框（select）的变化，根据选中的值来决定是否显示或隐藏input元素。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

layui监听下拉框选择事件,AIGC,javascript,layui,前端

HTML代码

        <div class="layui-form-item" id="rubric">
            <label class="layui-form-label">前端说明</label>
            <div class="layui-input-inline">
                <input type="text" id="user_rubric" name="user_rubric" autocomplete="off" class="layui-input" maxlength="32">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span> 前端管理员提示说明,最大长度32个字符</div>
        </div>

判断是否显示

  /*前端说明是否显示*/
        $("#rubric").css("display", "none");
        form.on("select(admin_is_super)", function (data) {
            console.log(data.value);
            var thisValue = data.value;
            if (thisValue == '3') {
                $("#rubric").css("display", "block");
            } else {
                $("#rubric").css("display", "none");
            }
        });

验证数据不能为空

    var admin_is_super = $('#admin_is_super').val();
            var user_rubric = $('#user_rubric').val();
            if (admin_is_super == 3) {
                if (user_rubric.length == 0) {
                    layer.msg("前端说明不能为空", {icon: 2, timeout: 100}, function () {
                        $('#user_rubric').focus();
                        return false;
                    })
                }
            }

编辑状态

    /*前端说明是否显示*/
        if (rubric == 3) {
            $("#rubric").css("display", "block");
        } else {
            $("#rubric").css("display", "none");
        }

        form.on("select(admin_is_super)", function (data) {
            //console.log(data.value);
            var thisValue = data.value;
            if (thisValue == '3') {
                $("#rubric").css("display", "block");
            } else {
                $("#rubric").css("display", "none");
            }
        });

JavaScript交互功能

HTML和CSS用于设置网页的基本结构和样式，而JavaScript则用于实现交互功能，比如根据下拉框的选项来控制input元素的显示或隐藏。

以下是一个简单的例子，使用JavaScript监听下拉框（select）的变化，然后根据选中的值来决定是否显示或隐藏input元素：

HTML:

<select id="selectElement">
  <option value="hide">隐藏</option>
  <option value="show">显示</option>
</select>

<input type="text" id="inputElement" style="display: none;">

JavaScript:

document.getElementById('selectElement').addEventListener('change', function() {
  var inputElement = document.getElementById('inputElement');
  if (this.value === 'show') {
    inputElement.style.display = 'block';
  } else {
    inputElement.style.display = 'none';
  }
});

在这个例子中，我们首先为下拉框的元素设置了一个id（selectElement），以及一个监听事件，当选项改变时，会触发这个事件。然后，在事件处理函数中，我们检查选中的值，如果值为’show’，则显示input元素，否则隐藏它。隐藏和显示是通过修改input元素的display样式属性来实现的。

@漏刻有时文章来源地址https://www.toymoban.com/news/detail-759145.html

到了这里，关于layui中使用JavaScript监听下拉框（select）的变化，根据选中的值来决定是否显示或隐藏input元素的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！