Dynamic change of elements in list SELECT

Let's start straight away. Play with the following lists, paying attention on dynamic change of the second select'b at a choice of one of elements of the first:

<script type = "text/javascript">

<!--

// Further at us the file from the streets containing houses, divided{shared} by a point follows

var aHouseValues = new Array (

"12/15,18,123",

"2,4",

"2/8,10/12",

"3",

"2,4,12,5/6,8"

);

// kh-cija, returning a file of houses on the set street

function getHouseValuesByStreet (index) {

    var sHouseValues = aHouseValues [index];

    return sHouseValues.split (","); // we shall transform a line to a file of houses

}

// Main kh-cija, deducing{removing} dynamically the list of houses

function MkHouseValues (index) {

    var aCurrHouseValues = getHouseValuesByStreet (index);

    var nCurrHouseValuesCnt = aCurrHouseValues.length;

    var oHouseList = document.forms ["address"] .elements ["house"];

    var oHouseListOptionsCnt = oHouseList.options.length;

    oHouseList.length = 0; // we delete all elements from the list of houses

    for (i = 0; i <nCurrHouseValuesCnt; i ++) {

        // Further we add necessary houses in the list

        if (document.createElement) {

            var newHouseListOption = document.createElement ("OPTION");

            newHouseListOption.text = aCurrHouseValues [i];

            newHouseListOption.value = aCurrHouseValues [i];

            // Here we use for addition of an element or method IE, or DOM which, alas, do not coincide on parameters …

            (oHouseList.options.add)? oHouseList.options.add (newHouseListOption): oHouseList.add (newHouseListOption, null);

} else {

            // For NN3.x-4.x

            oHouseList.options [i] = new Option (aCurrHouseValues [i], aCurrHouseValues [i], false, false);

}

}

}

// We initiate change of elements in the list of houses, depending on the current street

MkHouseValues (document.forms ["address"] .elements ["street"] .selectedIndex);

//->

</script>

The form in our example looks so:

<form name = "address" action = "*">

Street:

<select name = "street" onChange = " MkHouseValues (this.selectedIndex) ">

<option value = " street. KHrjundelja "> street and nbsp; KHrjundelja </option>

<option value = " per. The unknown person "> per. And nbsp; the Unknown person </option>

<option value = " street. Ottopyrkina "> street and nbsp; Ottopyrkina </option>

<option value = " street. The world - Trud-Maj "> street and nbsp; the World - Trud-Maj </option>

<option value = " bul. Nikhrenasebefamilija "> bul. And nbsp; Nikhrenasebefamilija </option>

</select>

*nbsp; the House:

<select name = "house">

<option value = "N/A"> N/A </option>

</select>

</form>

Dynamics{Changes} rulit, yes. The above-stated variant of dynamic change of elements of the list correctly funcikliruet in Internet Explorer 4 +, Netscape Navigator 3.x (!)-6.x, Opera 6.0 and is higher. Unfortunately, all Operas up to the sixth very much gljuchno react to removal{distance} and addition of elements …

As you can see, we trace event onChange in the list of streets and we change accordingly the list of houses.

\