安裝
GitHub下載地址：https://github.com/fesiong/layarea.git
使用（html+js）
1. html部分
整個選擇器需要使用一個父標簽包裹，如下使用了id="area-picker"，并且分別給省、市、區的select加上province-selector、city-selector、county-selector，用來區分對應的內容標簽，這里也可以自定義lay-filter，當一個頁面有多個省市區選擇器的時候，需要每組lay-filter命名不一樣，因此，最好的方式是，不手動設定lay-filter，每個select可以指定初始值，在select上寫data-value=""即可，初始值也可以通過js設定，
<div id="area-picker">
<div >網點地址</div>
<div style="width: 200px;">
<select name="province" data-value="https://www.cnblogs.com/jurij/p/廣東省" lay-filter="province-1">
<option value="">請選擇省</option>
</select>
</div>
<div style="width: 200px;">
<select name="city" data-value="https://www.cnblogs.com/jurij/p/深圳市" lay-filter="city-1">
<option value="">請選擇市</option>
</select>
</div>
<div style="width: 200px;">
<select name="county" data-value="https://www.cnblogs.com/jurij/p/龍崗區" lay-filter="county-1">
<option value="">請選擇區</option>
</select>
</div>
</div>
２. js部分
引入layarea, 根據指定選擇器渲染標簽
//配置插件目錄
layui.config({
base: './mods/'
, version: '1.0'
});
//一般直接寫在一個js檔案中
layui.use(['layer', 'form', 'layarea'], function () {
var layer = layui.layer
, form = layui.form
, layarea = layui.layarea;
layarea.render({
elem: '#area-picker',
// data: {
// province: '廣東省',
// city: '深圳市',
// county: '龍崗區',
// },
change: function (res) {
//選擇結果
console.log(res);
}
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/246471.html
標籤：Html/Css
上一篇：浮動元素的特點
下一篇：水平垂直居中深入挖掘