Question

我是JavaScript的新手。我试图使用另一个（名为Product）的选定值来控制一个列表框（称为聚合器）中的选项。下面是我到目前为止编写的代码。

现在，当我加载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]

TBB：[0,1,6]

Answer 1

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

首先，您要求提供ID“聚合器”：

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

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

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

Answer 2

首先，您的代码中存在大量语法错误。我在进行这些更改的地方添加了评论。

没有id元素“Aggregator”所以我改变了你的标记：

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>

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

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

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

2 个答案: