<!-- 我的思路： 1.页面加载时便进入后台获得第一级的值； 2.当第一级的值改变时，清空第二级和第三级的值，并加载第二级的值 3.当第二级的值改变时，清空第三级的值，并加载第三级的值 --><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>
