jQuery code for two interdependent dropdown lists

Question

I am struggling to make the code for two interdependent dropdown lists and I need some help:

    // 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])
            );
        });
    }

HERE I NEED HELP

When the user clicks on an option from test1, get the selected option.

Knowing the selected option, I could then build the array for question 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])
            );
        });
    }

Hope you ca help!

I am sorry, I am not an English Native and I'm not sure how to explain this better. Imagine two interdependent drop down lists. When the user clicks on an option from the first list, the second list gets populated with a set of options. If the user clicks on a different option from the first list, the second list gets populated with a set of different options. The options are generated from the array's above. — user2065483
– user2065483, Commented Mar 7, 2013 at 12:02
Please look at the "i need help part". I need a function which binds the first list to the second one, so I'll know which option from the first list was selected and generate the array with the options for the second list. — user2065483
– user2065483, Commented Mar 7, 2013 at 12:09
Oh, so the function add_options(val) works correctly? And you want to know how to find which option was selected? — Bill
– Bill, Commented Mar 7, 2013 at 12:14

Дария Печайко · Accepted Answer · 2013-03-07 12:16:28Z

try this(edited):

// 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);
});
}

Collectives™ on Stack Overflow

jQuery code for two interdependent dropdown lists

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related