创建两个依赖于第一个的下拉列表

Question

I am creating three drop down lists with all the possible options in my html. However, I need for them to change as the previous options are picked (hide and display the right ones). I got the second one to tie in to the first, I can't tie the third one in. How do I do this with this same style of code?

http://jsfiddle.net/cL2tt/115/

$(document).ready(function() {
    var optarray = $("#optthree").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
        }
    })

    $("#opttwo").change(function() {
        $("#optthree").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#optthree").html(addoptarr.join(''))
    }).change();
})

Answer 1

See my answer to a similar question, showing 2 different ways.

Changing the values in a <select> using another <select> using AJAX (PHP)