<!-- 我的思路： 1.頁面加載時便進(jìn)入后臺獲得第一級的值； 2.當(dāng)?shù)谝患壍闹蹈淖儠r，清空第二級和第三級的值，并加載第二級的值 3.當(dāng)?shù)诙壍闹蹈淖儠r，清空第三級的值，并加載第三級的值 --><table> <tr><th><em>*</em>意向車型：</th><td width="108"><select id="car_brand" onchange="checkBrand()"><option value="">請選擇品牌</option></select></td><td width="108"><select id="car_series" onchange="checkSeries()"><option value="">請選擇車系</option></select></td><td><select id="car_model"><option value="">請選擇車型</option></select></td> </tr> </table> <script type="text/javascript">// 頁面加載時加載第一級 loadBrand();// 加載第一級function loadBrand(){document.getElementById("car_brand").options.length=0;$.ajax({type: "POST",url: "action/do_car.jsp",data: "method=load_brand",dataType: "json",success: function(data) {var msg = data.msg;switch (msg) {case "success":var select = document.getElementById("car_brand");var option_one = new Option("請選擇品牌", -1); // create default optionselect.options.add(option_one); // add valuefor (i = 0; i < data.brands.length; i++) {// to load optionvar option = new Option(data.brands[i].name, data.brands[i].brandId);select.options.add(option);}break;default:alert(msg);break;}},error: function(xhr) {alert("錯誤：" + xhr.status + " " + xhr.statusText);}})}// 第一級改變時加載第二級function checkBrand(){document.getElementById("car_series").options.length=0;document.getElementById("car_model").options.length=0;loadSeries();}// 加載第二級function loadSeries(){$.ajax({type: "POST",url: "action/do_car.jsp",data: "method=load_series&brandid="+document.getElementById("car_brand").value,dataType: "json",success: function(data) {var msg = data.msg;switch (msg) {case "success":var series = document.getElementById("car_series");var one_series = new Option("請選擇車系",-1);series.options.add(one_series);var model = document.getElementById("car_model");var one_model = new Option("請選擇車型",-1);model.options.add(one_model);for (i = 0; i < data.cars.length; i++) {var option = new Option(data.cars[i].name, data.cars[i].carsId);series.options.add(option);}break;default:alert(msg);break;}},error: function(xhr) {alert("錯誤：" + xhr.status + " " + xhr.statusText);}})}/*-----------------------------------------*/// 第二級改變時加載第三級function checkSeries(){document.getElementById("car_model").options.length=0;loadModel();}// 加載第三級function loadModel(){$.ajax({type: "POST",url: "action/do_car.jsp",data: "method=load_model&seriesid="+document.getElementById("car_series").value,dataType: "json",success: function(data) {var msg = data.msg;switch (msg) {case "success":var select = document.getElementById("car_model");var option_one = new Option("請選擇車型",-1);select.options.add(option_one);for (i = 0; i < data.car.length; i++) {var option = new Option(data.car[i].name, data.car[i].carId);select.options.add(option);}break;default:alert(msg);break;}},error: function(xhr) {alert("錯誤：" + xhr.status + " " + xhr.statusText);}})} </script> ?

?

轉(zhuǎn)載于:https://www.cnblogs.com/lixin890808/archive/2013/04/06/3002816.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的JS 三级联动 下拉列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。