实现下拉框选择省份,再选择所选择省下边的市,以此类推下拉选择县,若没有选择省的情况下没法选择市。
1、html布局:
在select选择框内加入 lay-search=" " 即可将下拉选择框变成下拉搜索选择框。
<div class="layui-form-item">
<label class="layui-form-label">医院地址</label>
<div class="layui_input">
<div class="layui-input-inline">
<select name="province_id" class="province_select" lay-filter="province">
<option value="" selected>请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="city_id" class="city_select" lay-filter="city">
<option value="" selected>请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="country_id" class="country_select" lay-filter="country">
<option value="" selected>请选择县/乡</option>
</select>
</div>
<%--<div class="layui-input-inline">
<select name="town_id" class="town_select" lay-filter="town">
<option value="" selected>请选择镇</option>
</select>
</div>--%>
<%-- <div class="layui-input-inline">
<select name="village_id" class="village_select" lay-filter="village">
<option value="" selected>请选择村委会</option>
</select>
</div>--%>
</div>
</div>
2、对接口,下拉框选择省,以及对应的市、县:
var global_hos='';
//获取省份信息
function takeAddress() {
$.ajax({
async: false,
type: "GET",
url: "/location",
data: {},
dataType: "JSON",
success: function (res) {
console.log(global_hos);
var data = res.data;
data.map(function (v) {
if(global_hos.province_id == v.location_id){
$(".province_select").append('<option value="' + v.location_id + '" lay-filter="province" selected>' + v.location_name + '</option>');
cityAddress(global_hos.province_id);//通过省id获取市列表
}else{
$(".province_select").append('<option value="' + v.location_id + '" lay-filter="province">' + v.location_name + '</option>');
}
});
//select监听选择
tools1();
layui.use('form', function () {
form = layui.form;
form.render();
});
},
error: function (data) {
alert(data.message);
}
});
}
//通过省id获取市
function cityAddress(id) {
// console.log("省份id:"+id)
$.ajax({
async: false,
type: "GET",
url: "/location",
data: {location_id: id},
dataType: "JSON",
success: function (res) {
console.log(res);
var data = res.data;
data.map(function (v) {
if(global_hos.city_id==v.location_id){
$(".city_select").append('<option class="select_city" value="' + v.location_id + '" lay-filter="city" selected>' + v.location_name + '</option>');
countryAddress(global_hos.city_id);
}else{
$(".city_select").append('<option class="select_city" value="' + v.location_id + '" lay-filter="city">' + v.location_name + '</option>');
}
});
//select监听选择
tools2();
layui.use('form', function () {
form = layui.form;
form.render();
});
},
error: function (data) {
alert(data.message);
}
});
}
//通过市id获取县
function countryAddress(location_id) {
$.ajax({
async: false,
type: "GET",
url: "/location",
data: {location_id: location_id},
dataType: "JSON",
success: function (res) {
console.log(res);
var data = res.data;
data.map(function (v) {
if(global_hos.country_id==v.location_id){
$(".country_select").append('<option class="select_country" value="' + v.location_id + '" lay-filter="country" selected>' + v.location_name + '</option>');
}else{
$(".country_select").append('<option class="select_country" value="' + v.location_id + '" lay-filter="country">' + v.location_name + '</option>');
}
});
//select监听选择
tools3();
layui.use('form', function () {
form = layui.form;
form.render();
});
},
error: function (data) {
alert(data.message);
}
});
}
//下拉框绑定监听事件,在dom文件中写入<select lay-filter="province">
function tools1() {
layui.use('form', function () {
form = layui.form;
form.on('select(province)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值(省份id值)
console.log(data.othis); //得到美化后的DOM对象
var id = data.value;
resetSelect(4);
cityAddress(id);//取出省份id值传给市cityAddress
});
});
}
function tools2() {
layui.use('form', function () {
form = layui.form;
form.on('select(city)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值(市的id值)
console.log(data.othis); //得到美化后的DOM对象
resetSelect(3)
countryAddress(data.value);//取出市的id值传给县/乡countryAddress
});
});
}
function tools3() {
layui.use('form', function () {
form = layui.form;
form.on('select(country)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值(县/乡的id值)
console.log(data.othis); //得到美化后的DOM对象
resetSelect(2)
// townAddress(data.value);
});
});
}
//重置下拉框选项
function resetSelect(index) {
console.log(index)
var resArray = ['select_village', 'select_town', 'select_country', 'select_city'];
for (var i = index - 1; i >= 0; i--) {
var classname = resArray[i];
console.log(classname)
$('.' + classname).remove();
}
}