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

这有效：

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

Answer 2

而不是：

opt.option.add(opt);

执行：

ddl.appendChild(opt);

Answer 3

 opt.option.add(opt);

好像你正在为自己添加选项。

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

3 个答案: