JS 三级联动 下拉列表

<!--
我的思路：
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 option
                        select.options.add(option_one);                // add value
                        for (i = 0; i < data.brands.length; i++) {
                            // to load option
                            var 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>