PC(原生)——省市縣三級聯動
阿新 • • 發佈:2018-11-09
1、樣式展示:
2、html:
<div class="message_li_type"> <span class="message_li_type_span">地址</span> <div class="message_type_container address_input"> <span class="message_type_container_span province_span" onclick="ulOnclick(this)">請選擇省</span> <i class="down1"></i> <ul class="message_type_ul get_province"> <!--<li onclick=""> <span>選項1</span> </li>--> </ul> </div> <div class="message_type_container address_input"> <span class="message_type_container_span city_span" onclick="ulOnclick(this)">請選擇市</span> <i class="down1"></i> <ul class="message_type_ul gat_city"> <!--<li onclick=""> <span>選項1</span> </li>--> </ul> </div> <div class="message_type_container address_input"> <span class="message_type_container_span country_span" onclick="ulOnclick(this)">請選擇縣</span> <i class="down1"></i> <ul class="message_type_ul gat_country"> <!--<li onclick=""> <span>選項1</span> </li> --> </ul> </div> </div>
3、 下拉框css:
/*下拉選單的展示*/ .message_li_type { /*float: left;*/ /*width: 320px;*/ box-sizing: border-box; line-height: 40px; margin-bottom: 20px; } .message_li_type_span { text-indent: 6px; display: inline-block; padding-right: 4px; width: 100px; text-align: right; } .message_type_ul { display: none; z-index: 10; position: absolute; background: #fff; margin-left: -4px; width: 100%; text-indent: 10px; box-sizing: border-box; box-shadow: 2px 2px 10px 2px #e8e8e8; max-height: 400px; overflow: auto; } .message_type_ul li:hover { color: #1e7084; } .message_type_container { display: inline-block; position: relative; width: 598px; cursor: pointer; margin-left: 6px; text-indent: 8px; border: 1px solid #e8e8e8; } .message_type_container_span { color: #888; display: inline-block; width: 100%; } .message_type_container:hover > .down1 { transform: rotate(180deg); } /*下拉選單的展示結束*/
4、監聽下拉框點選顯隱事件:
由於上面css樣式中定義了下拉框為 display:none;所以判斷當點選的下拉框如果是none則讓其顯示,否則隱藏。
//監聽點選下拉選單 function ulOnclick(that) { var $ul = $(that).parent().children('.message_type_ul'); if ($ul.css("display") == "none") { $ul.show(); } else { $ul.hide(); } }
5、通過介面分別獲取省市縣資訊:
//獲取省份資訊
function provinceGet() {
operation.operation_ajax_async("/loca", "get", '', function () {
// console.log(global_data)
var data = global_data.data;
data.map(function (v) {
// console.log(v)
$(".get_province").append('<li class="get_location_li" data-id="' + v.location_id + '" data-name="' + v.location_name + '" onclick="liOnclick(this,1)">' +
'<span>' + v.location_name + '</span>' +
'</li>'
);
});
})
};
//獲取市資訊
function cityGet(type_id) {
var obj = {
location_id: type_id
}
operation.operation_ajax_async("/loca", "get", obj, function () {
// console.log(global_data)
var data = global_data.data;
data.map(function (v) {
// console.log(v)
$(".gat_city").append('<li class="get_location_li city_li" data-id="' + v.location_id + '" data-name="' + v.location_name + '" onclick="liOnclick(this,2)">' +
'<span>' + v.location_name + '</span>' +
'</li>'
);
});
})
};
//獲取縣資訊
function countryGet(type_id) {
var obj = {
location_id: type_id
}
operation.operation_ajax_async("/loca", "get", obj, function () {
// console.log(global_data)
var data = global_data.data;
data.map(function (v) {
// console.log(v)
$(".gat_country").append('<li class="get_location_li country_li" data-id="' + v.location_id + '" data-name="' + v.location_name + '" onclick="liOnclick(this,3)">' +
'<span>' + v.location_name + '</span>' +
'</li>'
);
});
})
};
6、監聽選擇下拉框裡面的選項事件:
//監聽點選選項
function liOnclick(that, type) {
var type_name = $(that).attr('data-name');
var type_id = $(that).attr('data-id');
//監聽選項的name值對應其id值
$(that).closest(".message_type_container").find(".message_type_container_span").text(type_name).attr('data-id', type_id);
if(type==0){
$(".main_project").hide();
}
//當type=1則當點選省的下拉框的時候,將市和縣的框的值置空,然後將所選省的id傳給市。
if (type == 1) {
$(".city_li").remove();
$('.city_span').text("請選擇市").attr('data-id', '');
$(".country_li").remove();
$(".country_span").text("請輸入縣").attr("data-id", '');
cityGet(type_id);
$(".get_province").hide();
}
//與上面if思路相同
if (type == 2) {
$(".country_li").remove();
$(".country_span").text("請輸入縣").attr("data-id", '');
countryGet(type_id)
$(".gat_city").hide();
}
if(type == 3){
$(".gat_country").hide();
}
}
7、下拉框資料回顯:
用 text() 屬性。
$(".province_span").text(data.province_name);