根据另一个 Javascript 的值更改一个 select

Question

我需要一个 <select> 下拉列表以根据另一个进行更改。这是我目前所拥有的，但没有用。

HTML

<html>
<head>
...
</head>
<body>      
    <form>
        <table>
            <tr>
                <td>Dropdown Menu 1</td>
                <td>Dropdown Menu 2</td>
            </tr>
            <tr>
                <td>
                    <select id="ddl1" onchange="changeDropdown(this,document.getElementById('ddl2'))">
                        <option value=""><!---------></option>
                        <option value="Colors">Colors</option>
                        <option value="Shapes">Shapes</option>
                        <option value="Sounds">Sounds</option>
                    </select>
                </td>
                <td>
                    <select id="ddl2">
                    </select>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Javascript

<script>
    function changeDropdown(ddl1,ddl2) {
        var colors = new Array('Black', 'Brown', 'Blue');
        var shapes = new Array('Triangle', 'Square', 'Circle');
        var sounds = new Array('Loud', 'Soft');

        switch (ddl1.value) {
            case 'Colors':
                for (i = 0; i < colors.length; i++) {
                    createOptions(ddl2, colors[i], colors[i]);
                }
                break;
            default:
                ddl2.options.length = 0;
                break;
        }
    }
    function createOptions(ddl,text,value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.option.add(opt);
    }
</script>

这需要在 Javascript 中。我知道人们通常会建议 jQuery 这样的事情，但这需要 Javascript。

我做错了什么？

提前致谢！

-安东尼

Answer 1

 opt.option.add(opt);

您似乎在将选项添加到自身。

Answer 2

这个有效：

function createOptions(ddl,text,value) {
    var opt = document.createElement('option');
    opt.setAttribute("value", value);
    opt.innerHTML=text;
    ddl.appendChild(opt);
}

Answer 3

而不是：

opt.option.add(opt);

做：

ddl.appendChild(opt);

根据另一个 Javascript 的值更改一个 select

Change one select based on the value of another with Javascript

javascript

html

select

option