实现选车型的三级联动
demo地址 http://style.scalap.com/blog/foo.html

借鉴于http://www.codebit.cn/javascript/combo-select.html
这里注释比较清晰（感谢上面辣么多注释的原作者,见上行链接）,不做过多阐释,代码如下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://style.cdn.juhaomai.net/style/js/global/lib/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
    </head>

    <body>
        <script language="JavaScript" type="text/javascript">
            /*
             * 说明：将指定下拉列表的选项值清空
             *
             * @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
             */
            function removeOptions(selectObj) {
                    if (typeof selectObj != 'object') {
                        selectObj = document.getElementById(selectObj);
                    }
                    // 原有选项计数
                    var len = selectObj.options.length;
                    for (var i = 0; i < len; i++) {
                        // 移除当前选项
                        selectObj.options[0] = null;
                    }
                }
                /*
                 * 说明：设置传入的选项值到指定的下拉列表中
                 *
                 * @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
                 * @param {Array} optionList 选项值设置 格式：[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ，必须
                 * @param {String} firstOption 第一个选项值，如：“请选择”，可选，值为空
                 * @param {String} selected 默认选中值，可选
                 * @param {Boolean} needBlankOption 是否需要空选择开头,不加这个三级联动会有问题的喔
                 */

            function setSelectOption(selectObj, optionList, firstOption, selected, needBlankOption) {
                if (typeof selectObj != 'object') {
                    selectObj = document.getElementById(selectObj);
                }
                // 清空选项
                removeOptions(selectObj);
                // 选项计数
                var start = 0;
                // 如果需要添加第一个选项
                if (firstOption) {
                    selectObj.options[0] = new Option(firstOption, '');
                    // 选项计数从 1 开始
                    start++;
                }
                if (needBlankOption) {
                    selectObj.options[0] = new Option('', '');
                    // 选项计数从 1 开始
                    start++;
                }
                var len = optionList.length;
                for (var i = 0; i < len; i++) {
                    // 设置 option
                    selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);
                    // 选中项
                    if (selected == optionList[i].val) {
                        selectObj.options[start].selected = true;
                    }
                    // 计数加 1
                    start++;
                }
            }

            function removeAllSelect() {
                document.getElementById("series").length = 0;
                document.getElementById("models").length = 0;
            }

            function removeModelSelect() {
                document.getElementById("models").length = 0;
            }
        </script>

        <script language="JavaScript" type="text/javascript">
            var baseUrl = "http://style.mc2113.com/static/api/"
            setBrand();

            function setBrand() {
                var jsonUrl = baseUrl + "brand_list.json";
                var brand = [];
                $.getJSON(jsonUrl, function(result) {
                    $.each(result, function(i, field) {
                        var single = {};
                        single.txt = field.brand_name;
                        single.val = field.brand_id;
                        brand.push(single);
                    });
                    setSelectOption('brand', brand, '', '', 1);
                });
            }

            function setSeries(brand) {
                if (!brand) {
                    removeAllSelect();
                    return;
                }
                var jsonUrl = baseUrl + brand + "_series_list.json";
                var series = [];
                $.getJSON(jsonUrl, function(result) {
                    $.each(result, function(i, field) {
                        var single = {};
                        single.txt = field.series_name;
                        single.val = field.series_id;
                        series.push(single);
                    });
                    removeModelSelect();
                    setSelectOption('series', series, '', '', 1);
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    removeAllSelect();
                });
            }

            function setModels(series) {
                if (!series) {
                    removeModelSelect();
                    return;
                }
                var brand = $('#brand').val();
                var jsonUrl = baseUrl + brand + "_" + series + "_model_list.json";
                var models = [];
                $.getJSON(jsonUrl, function(result) {
                    $.each(result, function(i, field) {
                        var single = {};
                        single.txt = field.model_name;
                        single.val = field.model_id;
                        models.push(single);
                    });
                    setSelectOption('models', models, '', '', 1);
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    removeModelSelect();
                });
            }
        </script>

        <select name="brand" id="brand" onchange="setSeries(this.options[this.selectedIndex].value);">
        </select> 型号

        <select name="series" id="series" onchange="setModels(this.options[this.selectedIndex].value);">
        </select> 系列

        <select name="models" id="models">
        </select> 模块
    </body>

</html>

« 从浏览器打开微信里面的网页(How to view the site in wechat on browser) 每天读一点redis之SDS字符串 »