隨著Web前端技術的飛速發展,前端頁面交互越來越豐富,省市聯動下拉菜單也成為了許多網站必不可少的功能。jQuery框架中提供了Ajax方法,用于向服務器請求數據并進行動態更新,極大地方便了我們實現省市聯動功能的開發。
//使用jQuery Ajax方法獲取省份列表 $.ajax({ type: "GET", url: "province.php", dataType: "json", //返回數據類型為json格式 success: function(data){ //遍歷獲取到的省份列表并添加到下拉菜單中 for(var i=0;i"+data[i].province_name+""); } } }); //使用jQuery Ajax方法獲取某個省份下的城市列表 $("#province").change(function(){ var province_id = $(this).val(); $.ajax({ type: "POST", url: "city.php", data: {"province_id":province_id}, //向服務器發送選擇的省份ID dataType: "json", success: function(data){ //清空原有的城市列表并將新的城市列表添加到下拉菜單中 $("#city").empty(); for(var i=0;i "+data[i].city_name+""); } } }); });
上述代碼中,我們首先使用GET方法向服務器請求省份列表的JSON數據,根據數據格式遍歷并添加到頁面中的省份下拉菜單中。然后,我們給省份下拉菜單添加了一個change事件,當用戶選擇某個省份后,使用POST方法向服務器發送選擇的省份ID,獲取該省份下的城市列表的JSON數據,再根據數據格式遍歷并添加到頁面中的城市下拉菜單中。這樣,就實現了簡單的省市聯動下拉菜單功能。
上一篇在js里面加css樣式