layui省市区下拉菜单三级联动
使⽤这个功能需要⽤到layui这个⽂件夹的内容,所以不能只把layui.css和layui.js引⼊,要从layui⽂件夹获取 显⽰效果
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layarea</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-form">
<div class="layui-form-item" id="area-picker">
<div class="layui-form-label">地址</div>
<div class="layui-input-inline" >
<select name="province" class="province-selector" data-value="⼴东省" lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" >
<select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" >
<select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
<option value="">请选择区</option>
</select>
</div>
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//配置插件⽬录
base: './mods/'
, version: '1.0'
});
//⼀般直接写在⼀个js⽂件中
layui.use(['layer', 'form', 'layarea'], function () {
var layer = layui.layer
, form = layui.form
, layarea = layui.layarea;
elem: '#area-picker',
change: function (res) {
/
/选择结果
console.log(res);
}
});
});js导航栏下拉菜单
</script> </body>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论