HTML代碼

        <div class="layui-form-item" id="rubric">
            <label class="layui-form-label">前端說(shuō)明</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> 前端管理員提示說(shuō)明,最大長(zhǎng)度32個(gè)字符</div>
        </div>

判斷是否顯示

  /*前端說(shuō)明是否顯示*/
        $("#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");
            }
        });

驗(yàn)證數(shù)據(jù)不能為空

    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("前端說(shuō)明不能為空", {icon: 2, timeout: 100}, function () {
                        $('#user_rubric').focus();
                        return false;
                    })
                }
            }

編輯狀態(tài)

    /*前端說(shuō)明是否顯示*/
        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用于設(shè)置網(wǎng)頁(yè)的基本結(jié)構(gòu)和樣式，而JavaScript則用于實(shí)現(xiàn)交互功能，比如根據(jù)下拉框的選項(xiàng)來(lái)控制input元素的顯示或隱藏。

以下是一個(gè)簡(jiǎn)單的例子，使用JavaScript監(jiān)聽(tīng)下拉框（select）的變化，然后根據(jù)選中的值來(lái)決定是否顯示或隱藏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';
  }
});

在這個(gè)例子中，我們首先為下拉框的元素設(shè)置了一個(gè)id（selectElement），以及一個(gè)監(jiān)聽(tīng)事件，當(dāng)選項(xiàng)改變時(shí)，會(huì)觸發(fā)這個(gè)事件。然后，在事件處理函數(shù)中，我們檢查選中的值，如果值為’show’，則顯示input元素，否則隱藏它。隱藏和顯示是通過(guò)修改input元素的display樣式屬性來(lái)實(shí)現(xiàn)的。

@漏刻有時(shí)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-759145.html

到了這里，關(guān)于layui中使用JavaScript監(jiān)聽(tīng)下拉框（select）的變化，根據(jù)選中的值來(lái)決定是否顯示或隱藏input元素的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！