Populate 2nd drop down

by dougiei

HTML

<div id="wrap">
    <form name="ff2">
        <div class="lftF">
            <select id="select_1" onchange="process(this,2)">
                <option selected>Choose Country</option>
                <option>Australia</option>
                <option>UK</option>
            </select>
        </div>
        <div class="lftF">
            <select id="select_2" disabled>
                <option selected>-</option>
                <option>Blank</option>
            </select>
        </div>
        <div class="lftF">
            <input type="button" onclick="rSet(this.form)" value="Reset" name="B2">
        </div>
    </form>
</div>
<!-- end wrap -->

CSS

body {
    font-family:arial, helvetica, sans-serif;
    font-weight:normal;
    font-size:13px;
    color:#000;
    text-align:left;
    margin:3px 0px;
}
select {
    width:150px;
    margin-bottom:20px;
}
#wrap {
    width:500px;
    height:50px;
    margin:20px;
}
.lftF {
    float:left;
    margin-right:20px;
}

JavaScript

var A = [];
A["Australia"] = ["Select City ...", "Sydney", "Melbourne", "Brisbane", "Adelaide"];
A["UK"] = ["Select City ...", "London", "York", "Manchester", "Cardiff", "Liverpool"];
//
function process(obj, sNumb) {
    var indx, targetObj, targArray, thisItem, i = 0;
    indx = obj.options.selectedIndex;
    if (indx === 0) {
        return;
    } // invalid selection 
    // ---------  
    // put object items list into next select box after clearing
    targetObj = document.getElementById("select_" + sNumb);
    targetObj.disabled = false;
    // clear existing options. 
    targetObj.options.length = 0;
    thisItem = 0;
    // build options list
    targArray = A[obj.options[indx].value];
    for (i = 0; i < targArray.length; i++) {
        thisItem = targArray[i];
        // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag) 
        targetObj.options[i] = new Option(thisItem, thisItem, false, false);
    }
    obj.blur();
}
// -------
function rSet(aForm) { // reset to original values
    var selectObj_2 = document.getElementById("select_2");
    selectObj_2.length = 0;
    selectObj_2.disabled = true;
    aForm.reset();
}
// --------