使用Javascript根据另一个选择的值更改一个选择

Question

I need one <select> dropdown to change based on another. 我需要一个<select>下拉列表来更改另一个。 Here is what I have so far, which is not working. 这是我到目前为止所没有的。

HTML 的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 Java脚本

<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>

This needs to be in Javascript. 这需要使用Javascript。 I know that people usually advice jQuery for stuff like this, but this needs to be Javascript. 我知道人们通常会建议jQuery这样的东西，但这必须是Javascript。

What am I doing wrong? 我究竟做错了什么？

Thanks in advance! 提前致谢！

-Anthony 安东尼

Answer 1

This works: 这有效：

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

Answer 2

Instead of: 代替：

opt.option.add(opt);

Do: 做：

ddl.appendChild(opt);

Answer 3

 opt.option.add(opt);

好像您要向自身添加选项。

使用Javascript根据另一个选择的值更改一个选择

问题描述

3 个解决方案

解决方案1
1 2015-01-24 21:19:28

解决方案2
1 已采纳 2015-01-24 21:19:34

解决方案3
0 2015-01-24 21:10:24

使用Javascript根据另一个选择的值更改一个选择

问题描述

3 个解决方案

解决方案1 1 2015-01-24 21:19:28

解决方案2 1 已采纳 2015-01-24 21:19:34

解决方案3 0 2015-01-24 21:10:24

解决方案1
1 2015-01-24 21:19:28

解决方案2
1 已采纳 2015-01-24 21:19:34

解决方案3
0 2015-01-24 21:10:24