jQuery模仿element-ui三级联动。数据用的本地三级联动数据,也可以改为后台数据
2.3.2新增功能
1.配置默认提示文字
2.清空功能
缺陷:
(已修复)1.每个页面只能用一次。
(已修复)2.暂时不能配置
- 引入js,css
<link rel="stylesheet" href="./css/select.css">
<script src="./js/jQuery.js"></script>
<script src="./js/city_code.js"></script> // 本地省市区数据
<script src="./js/select.js"></script> // select插件
- 开始使用
<div id="select" class="select"></div>
<div id="select1" class="select"></div>
// 未添加配置、默认
$('#select1').Select(res => {
console.log(res); // 已选择区域信息
})
----------------------------------------------------------------------------------
/*
* 配置项
* text:提示词; 默认'请选择区域'
* expandTrigger: click | mouseover; 默认click
* style: jQuery改变css方式
*/
let options = {
width:'300px',
height:'50px',
color:'#93b9ff',
borderColor:'#93b9ff',
text:'请选择省市区',
expandTrigger:'mouseover',
}
// 加入配置
$('#select').Select(res => {
console.log(res); // res 返回已选择区域信息
},options)