cascader 無限級聯選擇器的使用
html代碼
<div class="layui-form-item"> <label class="layui-form-label">市內線路:</label> <div class="layui-input-block" style='position: relative;'> <input type="text" id="layui_cascader" class="layui-input" readonly="readonly"> </div> </div>
js代碼
var city_value = ''; var cas=cascader({ elem: "#layui_cascader", //data: data,//需要的靜態數據,類型為數組, url: "{:url('cityLine/getCity')}",//異步獲取的數據,類型為數組,(data與url兩個參數二選一) //type: "post",//異步獲取的方式,默認get,可省略 // triggerType: "change",//觸發方式,不填或其他都為click,可選參數"change",即鼠標移入觸發 // showLastLevels: true,//輸入框是否只顯示最后一級,默認false,即全顯示 // where: { //異步傳入的參數,可省略 // a: "aaa" // }, //value: ["B", "BB2", "BBB4"],//傳入的初始值,類型為數組,值為data的value值 // changeOnSelect: true, success: function (valData,labelData) { //回調函數,選擇完成之后的回調函數,返回值為value數組 console.log(valData,labelData); city_value = valData; } });
這里需要特別注意渲染數據返回格式問題 :Code是0首字母大寫Data同樣首字母也是大寫 否則無法渲染成功(文檔無這個說明)
https://fly.layui.com/extend/cascader/(官方文檔)
by :wangyang