Java Script drop down options controlled by another drop down

Question

I am extremely new to JavaScript. I am trying to control the options inside one listbox (called Aggregator) using the selected value of another (called Product). Below is the code I have written so far.

Now when I load the HTML page the code I have written to control the text boxes (using txt, txt2, txt3) does not work either now.

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

Other text boxes emitted

I need the Aggregator to display certain values from the aggrs list depending on the value selected in the Product select:

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

DLG : [0,1]

TBB : [0,1,6]

Answer 1

First off, there are a LOT of syntax errors in your code. I have added comments where I made those changes.

There was no id element "Aggregator" so I changed your markup:

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>

You had a lot of duplicate code (still is some) and other issues (see comments)

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

This is NOT really pretty (OK it is somewhat strange the options you set) even yet but at least it should work.

Sample to work with: http://jsfiddle.net/Qc4yD/

Answer 2

Don't go learning jQuery if you're having trouble with basic JavaScript. You'll have worse problems with jQuery.

For a start, you're asking for the ID "Aggregator":

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

when you don't have an object with the ID "Aggregator":

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