layui 學習筆記(五) 可輸入下拉選 & 可輸入標簽

本文轉載自查看原文 2020-05-08 17:05 2600 layui/ 前台

可輸入的下拉選

-類似elementUI中的輸入建議：還沒想到特別好的方法。
暫時可想到的解決的方案就是：

方案1：

　　把input 疊加到select上，外觀看起來像一個框。

　　利用z-index把 input框放到select 上層、並讓select 不自動填充。-- 我現在做的事情：在選擇其他時讓他自定義輸入。

　　第一步　　

　　　　select 加上 autocomplete="off"

　　第二步

　　　　寫一個樣式：

　　　　.input-select{margin-left: 110px; position:absolute;z-index:2; width: 74%;top: 0px;display: none;}

　　　　放到要用的input 或div上 (輸入框先不要驗證等顯示的時候加驗證)

　　　　***當然你可以把輸入框的位置放到你想要的地方不用覆蓋到select上方用.show 和.hide控制顯示和隱藏。

　　第三步：

　　　　js 做個觸發：js 因人而異吧看想做成什么樣的

form.on('select(molding)', function(data){
            if(data.value=='xxx'){
                $('#moldingOtDiv').show();
                $('#moldingOt').attr("lay-verify","required|length");
            }else{
                $('#moldingOtDiv').hide();
                $('#moldingOt').val('');
                $('#moldingOt').attr("lay-verify","");
            }
        });