由另一个下拉列表控制的 Javascript 下拉选项

Question

我对 JavaScript 非常陌生。我正在尝试使用另一个列表框（称为聚合器）的选定值（称为产品）来控制一个列表框（称为聚合器）中的选项。以下是我到目前为止编写的代码。

现在，当我加载 HTML 页面时，我编写的用于控制文本框的代码（使用 txt、txt2、txt3）现在也不起作用。

Javascript

function pGo() {

            var x = document.getElementById("Product").value;
            var txt = "";
            var txt2 = "";
            var txt3 = "";
            var list = document.getElementById("Aggregator");
            var aggrs = new Array();
            aggrs[0] = "h";
            aggrs[1] = "e";
            aggrs[2] = "l";
            aggrs[3] = "l";
            aggrs[4] = "l";
            aggrs[5] = "o";
            aggrs[6] = "o";
            var length = aggrs.length;
            var element = null;

            if (x == "HII") {
                txt = "Full ";
                txt2 = "/";
                txt3 = "/";
                for (var i = 0; i < 5; i++)){
                element = aggrs[i]
                var opt = document.createElement("option");
                opt.innerText = element;
                opt.setAttribute(element, 'newvalue');
                list.appendChild(opt);
                }
            }
            else if (x == "DLG"){
                txt = "Full";
                txt2 = "/T";
                txt3 = "/responses/";
                for (var i = 0; i < 1; i++)){
                element = aggrs[i]
                var opt = document.createElement("option");
                opt.innerText = element;
                opt.setAttribute(element, 'newvalue');
                list.appendChild(opt);
                }
            }
            else if (x == "TBB"){
                txt = "Full ";
                txt2 = "/Trams";
                txt3 = "/respo";
                for (var i = 0; i < 1; i++)){
                element = aggrs[i]
                var opt = document.createElement("option");
                opt.innerText = element;
                opt.setAttribute(element, 'newvalue');
                list.appendChild(opt);
                }
                element = aggrs[6]
                var opt = document.createElement("option");
                opt.innerText = element;
                opt.setAttribute(element, 'newvalue');
                list.appendChild(opt);
            }               
            form.elements.calcType.value = txt;
            form.elements.transform.value = txt2;
            form.elements.calcResponse.value = txt3;
            }

HTML

product 
        <select id="Product" onchange = "pGo()">
            <option>HII</option>
            <option>DLG</option>
            <option>TBB</option>
        </select><div>
        <script type = "text/javascript">
aggregator      
        <select name = "Aggregator">
        </select><br/><br/>

发出的其他文本框

我需要聚合器根据产品选择中选择的值显示聚合列表中的某些值：

HII : [0,1,2,3,4,5]

DLG：[0,1]

待定：[0,1,6]

Answer 1

如果您在使用基本 JavaScript 时遇到问题，请不要去学习 jQuery。使用 jQuery 会有更严重的问题。

首先，您要求提供 ID“Aggregator”：

var list = document.getElementById("Aggregator");

当您没有 ID 为“Aggregator”的对象时：

<select name = "Aggregator"></select>

Answer 2

首先，您的代码中有很多语法错误。我在进行这些更改的地方添加了 cmets。

没有 id 元素“聚合器”，所以我更改了您的标记：

product
<select id="Product" onchange="pGo();">
    <option>Pick one</option>
    <option>HII</option>
    <option>DLG</option>
    <option>TBB</option>
</select>
<div>aggregator
    <select id="Aggregator" name="Aggregator"></select>
    <br/>
    <br/>
</div>

你有很多重复的代码（仍然是一些）和其他问题（参见 cmets）

// function to remove duplicate code
function addOptions(list, aggrs, limit) {
    var i = 0;
    // fix issue where option list did not empty on new select
    for (; i < list.length; i++) {
        list.remove(i);
    }
    for (i = 0; i < limit; i++) { // fix extra ")"
        var opt = document.createElement("option");
        element = aggrs[i]; //missing semicolon
        opt.text = element;  // use standard form not innerHtml
        opt.value = element;  // you had no value
        opt.setAttribute(element, 'newvalue');
        list.appendChild(opt);
    }
}

function pGo() {
    var x = document.getElementById("Product").value;
    var txt = "";
    var txt2 = "";
    var txt3 = "";
    var list = document.getElementById("Aggregator");
    var aggrs = ["h", "e", "l", "l", "l", "o", "o"]; //simpler array
    var length = aggrs.length;
    var element = null;
    if (x == "HII") {
        txt = "Full ";
        txt2 = "/";
        txt3 = "/";
        addOptions(list, aggrs, 5);

    } else if (x == "DLG") {
        txt = "Full";
        txt2 = "/T";
        txt3 = "/responses/";
        addOptions(list, aggrs, 1);
    } else if (x == "TBB") {
        txt = "Full ";
        txt2 = "/Trams";
        txt3 = "/respo";
        addOptions(list, aggrs, 1);
        // strange additional option added
        var oneAggr = [];
        oneAggr[0] = aggrs[6];
        addOptions(list, oneAggr, 1);
    }
    //  form.elements.calcType.value = txt;  // commented out due to not existing
    //  form.elements.transform.value = txt2;
    //  form.elements.calcResponse.value = txt3;
}

这不是很漂亮（好吧，你设置的选项有点奇怪），但至少它应该可以工作。

使用示例：http://jsfiddle.net/Qc4yD/