使用jQuery實現聯動效果
應用場景：收貨地址
1、准備三個下拉框
<select class="changeArea" id='province'>
<option value="" > --請選擇-- </option>
</select>
<select class="changeArea" id="city">
<option value="" > --請選擇-- </option>
</select>
<select class="changeArea" id="area">
<option value="" > --請選擇-- </option>
</select>
2、由於架構是前后端分離、所以使用Ajax發送請求獲取省份數據、然后渲染
<script>
// 頁面初始化的是時候、調用此方法
getList( 0, '#province' )
// 公共方法 - 獲取數據
function getList( id, position )
{
$.ajax({
method: 'get',
url: "http://www.test.com/index.php/region/getList",
data: {
id:id
},
dataType: 'json',
success: function( res )
{
// 判斷返回的結果
if( res.code == 0 )
{
var str = ' <option value=""> --請選擇-- </option>'
$( res.data).each( function( k,v ){
str += ' <option value="'+v.id+'">'+v.name+'</option>'
})
$( position ).html( str )
}
}
})
}
</script>
3、由於頁面到現在只實現了第一個下拉框省份的數據、要實現省份發生改變的時候、城市也發生改變、為了減少代碼的冗余、直接調用js公共方法
$(document).on('change', '.changeArea', function(){
var id = $(this).val()
var position = $(this).next().prop('id')
getList( id, '#'+position )
})
4、實現如上之后、發現數據改變的還存在問題、省份改變之后、之前選擇的地區數據依舊還在、為了解決、使用如下代碼
$(this).nextAll().html( '<option value=""> --請選擇-- </option>' )
5、最終實現、效果如下：
6、最終的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 聯動 </title>
</head>
<body>
<select class="changeArea" id='province'>
<option value="" > --請選擇-- </option>
</select>
<select class="changeArea" id="city">
<option value="" > --請選擇-- </option>
</select>
<select class="changeArea" id="area">
<option value="" > --請選擇-- </option>
</select>
</body>
</html>
<script src="__STATIC__/jquery-3.3.1.js"></script>
<script>
// 頁面初始化的是時候、調用此方法
getList( 0, '#province' )
// 下拉框的改變事件
// 1、獲取數據id
// 2、獲取當前下拉框之后的第一個兄弟節點的id
// 3、將當前下拉框之后的所有兄弟節點的內容變為請選擇
// 4、判讀id是否為空、如果為空、則終止執行
// 5、調用公共方法獲取對應數據
$(document).on('change', '.changeArea', function(){
var id = $(this).val()
var position = $(this).next().prop('id')
$(this).nextAll().html( '<option value=""> --請選擇-- </option>' )
if( id == '' )
{
return false;
}
getList( id, '#'+position )
})
// 公共方法 - 獲取數據
function getList( id, position )
{
$.ajax({
method: 'get',
url: "http://www.test.com/index.php/region/getList",
data: {
id:id
},
dataType: 'json',
success: function( res )
{
// 判斷返回的結果
// 如果狀態碼為0、則表示返回成功、則讓之后的節點顯示、同時、將數據追加
// 如果狀態碼不是0、則表示返回失敗、則讓之后兄弟節點隱藏
if( res.code == 0 )
{
$( position ).show()
var str = ' <option value=""> --請選擇-- </option>'
$( res.data).each( function( k,v ){
str += ' <option value="'+v.id+'">'+v.name+'</option>'
})
$( position ).html( str )
}else{
$( position ).hide()
}
}
})
}
</script>
