Select联动菜单代码，通过设置Json来改变选项

jQuery.MultipleLevelSelector.js

(function($){
    var defaults = {
        id: "s1",
        splitStr: "-"
    };
    var opts = {};
    var methods = {
        init: init,
        getValue: function getSelectValue() {
            var selects = $(this).find('select');
            var value = "";
            selects.each(function() {
                if ($(this).val()) {
                    value += $(this).val() + opts.splitStr;
                }
            });
            return value.substr(0, value.length - 1);
        },
        setValue: function setValue(defaultValue) {
            var valArr = defaultValue.split(opts.splitStr);
            for (var i = 0, vLen = valArr.length; i < vLen; i++) {
                var selects = $(this).find('select');
                $(selects[i]).val(valArr[i]);
                $(selects[i]).trigger("change");
            }
        }
    }
    $.fn.MultipleLevelSelector = function(method) {
        // Method calling logic
        if (methods[method]) {
              return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if ( typeof method === 'object' || ! method ) {
              return methods.init.apply(this, arguments);
        } else {
              $.error( 'Method ' +  method + ' does not exist on jQuery.MultipleLevelSelector' );
        }
    };
    function appendOptions(target, id, selJson) {
        if (id) {
            var $sel = $("#" + id);
            if ($sel.size() === 0) {
                $(target).append($("<select></select>", {
                    "id":id
                }));
                $sel = $("#" + id);
            } else {
                $sel.empty();
            }
            if (selJson.hasOwnProperty("next")) {
                $sel.on("change", function() {
                    $("#" + id + " ~ select").remove();
                    appendOptions(target, selJson.next.id, selJson.next.opts[$(this).has(":selected").val()]);
                });
                $sel.show();
                for (var i in selJson.next.opts) {
                    $sel.append(new Option(selJson.next.opts[i].name, i));
                }
                if (selJson.next.hasOwnProperty("id") && selJson.next.hasOwnProperty("opts") && selJson.next.opts[$sel.has(":selected").val()]) {
                    appendOptions(target, selJson.next.id, selJson.next.opts[$sel.has(":selected").val()]);
                }
            } else {
                $sel.hide();
            }
        }
    }
    function init(options) {
        opts = $.extend(defaults, options);
        appendOptions(this, options.id, options.selJson);
    }
})(jQuery);

testData.json

{
    next: {
        id: "s2",
        opts: {
            "0": {
                name: "未孕"
            },
            "1": {
                name: "怀孕",
                next: {
                    opts:  {
                        "1": { name: "1" },
                        "2": { name: "2" },
                        "3": { name: "3" },
                        "4": { name: "4" },
                        "5": { name: "5" },
                        "6": { name: "6" },
                        "7": { name: "7" },
                        "8": { name: "8" },
                        "9": { name: "9" }
                    }
                }
            },
            "2": {
                name: "生育",
                next: {
                    opts: {
                        "0": { name: "男" },
                        "1": { name: "女" },
                        "2": { name: "双胞胎男" },
                        "3": { name: "双胞胎女" },
                        "4": { name: "龙凤胎" },
                        "5": { name: "多胞胎" }
                    }
                }
            },
            "3":  {
                name: "孕情消失",
                next: {
                    opts: {
                        "0": { name: "人工引流产" },
                        "1": { name: "意外" },
                        "2": { name: "非法引流产" }
                    }
                }
            }
        }
    }
}

testSelect.html

<html>
<head>
<title>简单的Select联动菜单代码</title>
</head>
<body>
<form name="form">
<div id="selWrap"></div>
</form>
<button onclick="getValue()">取值</button>
<input type="text" id="newValue" />
<button onclick="setValue()">设值</button>
<script src="jquery-1.11.1.min.js"></script>
<script>
(function($){
    var defaults = {
        id: "s1",
        splitStr: "-"
    };
    var opts = {};
    var methods = {
        init: init,
        getValue: function getSelectValue() {
            var selects = $(this).find('select');
            var value = "";
            selects.each(function() {
                if ($(this).val()) {
                    value += $(this).val() + opts.splitStr;
                }
            });
            return value.substr(0, value.length - 1);
        },
        setValue: function setValue(defaultValue) {
            var valArr = defaultValue.split(opts.splitStr);
            for (var i = 0, vLen = valArr.length; i < vLen; i++) {
                var selects = $(this).find('select');
                $(selects[i]).val(valArr[i]);
                $(selects[i]).trigger("change");
            }
        }
    }
    $.fn.MultipleLevelSelector = function(method) {
        // Method calling logic
        if (methods[method]) {
              return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if ( typeof method === 'object' || ! method ) {
              return methods.init.apply(this, arguments);
        } else {
              $.error( 'Method ' +  method + ' does not exist on jQuery.MultipleLevelSelector' );
        }
    };
    function appendOptions(target, id, selJson) {
        if (id) {
            var $sel = $("#" + id);
            if ($sel.size() === 0) {
                $(target).append($("<select></select>", {
                    "id":id
                }));
                $sel = $("#" + id);
            } else {
                $sel.empty();
            }
            if (selJson.hasOwnProperty("next")) {
                $sel.on("change", function() {
                    $("#" + id + " ~ select").remove();
                    appendOptions(target, selJson.next.id, selJson.next.opts[$(this).has(":selected").val()]);
                });
                $sel.show();
                for (var i in selJson.next.opts) {
                    $sel.append(new Option(selJson.next.opts[i].name, i));
                }
                if (selJson.next.hasOwnProperty("id") && selJson.next.hasOwnProperty("opts") && selJson.next.opts[$sel.has(":selected").val()]) {
                    appendOptions(target, selJson.next.id, selJson.next.opts[$sel.has(":selected").val()]);
                }
            } else {
                $sel.hide();
            }
        }
    }
    function init(options) {
        opts = $.extend(defaults, options);
        appendOptions(this, options.id, options.selJson);
    }
})(jQuery);
var selJson = {
    next: {
        id: "s2",
        opts: {
            "v0": {
                name: "n0",
                next: {
                    opts: {
                        "v00": { name: "n00" },
                        "v01": { name: "n01" }
                    }
                }
            },
            "v1": {
                name: "n1",
                next: {
                    id: "s3",
                    opts: {
                        "v10": {
                            name: "n10",
                            next: {
                                opts:  {
                                    "v100": { name: "n100" },
                                    "v101": { name: "n101" }
                                }
                            }
                        },
                        "v11": { name: "n11" }
                    }
                }
            },
            "v2": {
                name: "n2",
            },
            "v3":  {
                name: "n3",
                next: {
                    opts: {
                        "v30": { name: "n30" },
                        "v31": { name: "n31" }
                    }
                }
            }
        }
    }
};
$("#selWrap").MultipleLevelSelector({
    id: "s1",
    splitStr: "-",
    selJson: selJson
});

function getValue() {
    alert($("#selWrap").MultipleLevelSelector('getValue'));
}

function setValue() {
    $("#selWrap").MultipleLevelSelector('setValue', $("#newValue").val());
}
</script>
</body>
</html>

尝试写为jQuery插件

测试了下三层联动，层次多了JSON就不好写了