javascript下拉列表选择取决于先前的选择

Question

我不得不回到绘图板，因为我以前的js不适用于我的新数据库结构。

我无法弄清楚如何使用JavaScript来填充依赖于先前下拉列表选择的下拉列表

我总共有5个下拉列表，其中所选的选项取决于之前选择的选项。

我遇到的问题是创建的下拉框在表单提交时使用GET时不发送它们的值，而我不知道如何定义该值。

有人可以给我建议创建这些下拉列表吗？谷歌搜索正在提出想法，但对于有超过2个下拉列表的任何内容都不够。

谢谢

HTML

<select id="product" name="products" onchange="configureDropDownLists(this,'faulttype')">
    <option value="">select</option>

    <option value="test1">test1</option>
    <option value="test2">test2</option>
    <option value="test3">test3</option>
    <option value="test4">test4</option>

</select>

    Fault Type:

    <select id="faulttype" name="faulttypes" onchange="configureDropDownLists2(this,'faulttype2')">
        <option>{blank}</option>
    </select>

    Fault Type2:

    <select id="faulttype2" name="faulttypes2" onchange="configureDropDownLists3(this,'faulttype3')">
        <option>{blank}</option>
    </select>

    Fault Type3:

    <select id="faulttype3" name="faulttypes3">
        <option>{blank}</option>
    </select>

    <input type="submit" value="Search">
    </fieldset>

JS

var test1 = new Array('test5', 'test6', 'test7');
var test2 = new Array('test8', 'test9', 'test10');
var test3 = new Array('test11', 'test12', 'test13');
var test4 = new Array('test14', 'test15', 'test16');

switch (product.value) {

    case 'test1':
        document.getElementById(faulttype).options.length = 0;
        for (i = 0; i < test1.length; i++) {
            createOption(document.getElementById(faulttype), test1[i], test1[i]);
        }
        break;

    case 'test2':
        document.getElementById(faulttype).options.length = 0;
        for (i = 0; i < test2.length; i++) {
            createOption(document.getElementById(faulttype), test2[i], test2[i]);
        }

        break;
    case 'test3':
        document.getElementById(faulttype).options.length = 0;
        for (i = 0; i < test3.length; i++) {
            createOption(document.getElementById(faulttype), test3[i], test3[i]);
        }
        break;

    case 'test4':
        document.getElementById(faulttype).options.length = 0;
        for (i = 0; i < test4.length; i++) {
            createOption(document.getElementById(faulttype), test4[i], test4[i]);
        }
        function configureDropDownLists2(faulttype, faulttype2) {
            var test5 = new Array('test15', 'test14');
            var test6 = new Array('test16', 'test17');

            switch (faulttype.value) {
                case 'test5':
                    document.getElementById(faulttype2).options.length = 0;
                    for (i = 0; i < test5.length; i++) {
                        createOption1(document.getElementById(faulttype2), test5[i], test5[i]);
                    }
                    break;

                case 'test6':
                    document.getElementById(faulttype2).options.length = 0;
                    for (i = 0; i < test6.length; i++) {
                        createOption1(document.getElementById(faulttype2), test6[i], test6[i]);
                    }
                    break;
            }

            function createOption1(ddl, text, value) {
                var opt = document.createElement('option');
                var ddl = document.getElementById('faulttype2');

                opt.value = value;
                opt.text = text;
                ddl.options.add(opt);
            }