两个相互依赖的下拉列表的jQuery代码

时间:2013-03-07 11:52:00

标签: jquery

我正在努力为两个相互依赖的下拉列表创建代码,我需要一些帮助:

    // Question 1
    var test1 = ['|Please Select','1|1','2|2','3|3']

    // Question 2

    var test2 = []
    var test2a = ['|Please Select','1a|1a','2a|2a','3a|3a']
    var test2b = ['|Please Select','1b|1b','2b|2b','3b|3b']
    var test2c = ['|Please Select','1c|1c','2c|2c','3c|3c']

    // Set the options from Question 1 using the values from the array test1

    val = "test1";
    function add_options(val){
        arr = window[val];
        var the_id = "#"+val;
        $.each(arr, function(key,val){
            options = val.split('|');
            $(the_id).append(
                $('<option></option>')
                .val(options[0])
                .html(options[1])
            );
        });
    }

这里我需要帮助

当用户点击test1中的选项时,获取所选选项。

知道了所选的选项后,我可以为问题2构建数组:

    if(selected == "1"){
        var test2 = test2a;
    } else if (selected == "2") {
        var test2 = test2b;
    } else if (selected == "3") {
        var test2 = test2c;
    }

    val = "test2";
    function add_options(val){
        arr = window[val];
        var the_id = "#"+val;
        $.each(arr, function(key,val){
            options = val.split('|');
            $(the_id).append(
                $('<option></option>')
                .val(options[0])
                .html(options[1])
            );
        });
    }

希望你能帮忙!

1 个答案:

答案 0 :(得分:1)

试试这个(编辑过):

// Question 1
var test1 = ['|Please Select', '1|1', '2|2', '3|3']

// Question 2
var test2 = [];
var test2a = ['|Please Select', '1a|1a', '2a|2a', '3a|3a'];
var test2b = ['|Please Select', '1b|1b', '2b|2b', '3b|3b'];
var test2c = ['|Please Select', '1c|1c', '2c|2c', '3c|3c'];

// Set the options from Question 1 using the values from the array test1
function add_options(val) {
var arr = window[val];
var the_id = "#" + val;
$(the_id).text("");
$.each(arr, function (key, val) {
    var options = val.split('|');
    $(the_id).append(
            $('<option></option>')
            .val(options[0])
            .html(options[1])
        );
});
}

$(document).ready(function () {
var val = "test1";
add_options(val);
$("#test1").change(function () {
    var selected = $(this).val();
    if (selected == "1") {
        test2 = test2a;
    } else if (selected == "2") {
        test2 = test2b;
    } else if (selected == "3") {
        test2 = test2c;
    }

    val = "test2";
    add_options(val);
});
}