Ok....I send my answer to Lasse by accidentaly clicking Reply instead of
ReplyGroup....
I asked if he can do the script for three select's and here is his code:
he did it with and withouth option buttons....
The code is a bit hard aand after whole night I still don't have a clue on
how to use it as the records are from the database...
So if anyone is willing to help I can post the TABLEs structure....
One again thanx Lasse...
by Lasse Reichstein Nielsen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hotel Selection</title>
<script type="text/javascript">
var CountryCity = new Object();
CountryCity["CtryAustria"] = new Array("Vienna", "CityVienna",
"SalzBurg", "CitySalzburg");
CountryCity["CtryCroatia"] = new Array("Zagreb", "CityZagreb",
"Split", "CitySplit")
var CityHotel = new Object();
CityHotel["CityVienna"] = new Array("Palace", "HotelPalace",
"Royal", "HotelRoyal");
CityHotel["CitySalzburg"] = new Array("Sheraton", "HotelSheraton",
"Lukas", "HotelLukas");
CityHotel["CityZagreb"] = new Array("Opera", "HotelOpera",
"Conti", "HotelConti");
CityHotel["CitySplit"] = new Array("Inter", "HotelInter",
"Unter", "HotelUnter");
function setOptions(selectRef,optArray) {
var optsRef = selectRef.options;
// Clear old options
if (selectRef.removeChild) { // DOM to remove optgroups as well as options
while(selectRef.hasChildNodes()) {
selectRef.removeChild(selectRef.firstChild);
}
}
optsRef.length = 0;
// Insert new options
for (var i = 0 ; i < optArray.length-1 ; i += 2) {
var opt = new Option(optArray,optArray[i+1]); // text,value
optsRef[optsRef.length] = opt;
}
}
function onChangeCtry(selRef) {
var value = selRef.options[selRef.selectedIndex].value;
var citySel = selRef.form.elements['citySel'];
setOptions(citySel,CountryCity[value]);
citySel.options[0].selected = true;
onChangeCity(citySel);
}
function onChangeCity(selRef) {
var value = selRef.options[selRef.selectedIndex].value;
var hotelSel = selRef.form.elements['hotelSel'];
setOptions(hotelSel,CityHotel[value]);
hotelSel.options[0].selected=true;
}
function init() {
onChangeCtry(document.forms['form1'].elements['countrySel']);
onChangeCtry(document.forms['form2'].elements['countrySel']);
}
</script>
</head>
<body onload="init();">
<h1>Hotel Selection</h1>
<form name="form1" action="">
<p><label for="countrySel">Country:
<select name="countrySel" onchange="onChangeCtry(this)">
<option value="CtryAustria">Austria</option>
<option value="CtryCroatia">Croatia</option>
</select></label>
</p>
<p><label for="citySel">City:
<select name="citySel" onchange="onChangeCity(this)">
<option value="CityVienna">Vienna</option>
<option value="CitySalzburg">Salzburg</option>
<option value="CityZagreb">Zagreb</option>
<option value="CitySplit">Split</option>
</select></label>
</p>
<p><label for="hotelSel">Hotel:
<select name="hotelSel">
<option value="HotelPalace">Palace</option>
<option value="HotelRoyal">Royal</option>
<option value="HotelSheraton">Sheraton</option>
<option value="HotelLukas">Lukas</option>
<option value="HotelOpera">Opera</option>
<option value="HotelConti">Conti</option>
<option value="HotelInter">Inter</option>
<option value="HotelUnter">Unter</option>
</select></label>
</p>
</form>
<hr>
<p>Same form with option groups</p>
<!-- ================================================================= -->
<form name="form2" action="">
<p><label for="countrySel">Country:
<select name="countrySel" onchange="onChangeCtry(this)">
<option value="CtryAustria">Austria</option>
<option value="CtryCroatia">Croatia</option>
</select></label>
</p>
<p><label for="citySel">City:
<select name="citySel" onchange="onChangeCity(this)">
<optgroup label="Austria">
<option value="CityVienna">Vienna</option>
<option value="CitySalzburg">Salzburg</option>
</optgroup>
<optgroup name="Croatia">
<option value="CityZagreb">Zagreb</option>
<option value="CitySplit">Split</option>
</optgroup>
</select></label>
</p>
<p><label for="hotelSel">Hotel:
<select name="hotelSel">
<optgroup label="Vienna">
<option value="HotelPalace">Palace</option>
<option value="HotelRoyal">Royal</option>
</optgroup>
<optgroup label="Salzburg">
<option value="HotelSheraton">Sheraton</option>
<option value="HotelLukas">Lukas</option>
</optgroup>
<optgroup label="Zagreb">
<option value="HotelOpera">Opera</option>
<option value="HotelConti">Conti</option>
</optgroup>
<optgroup label="Split">
<option value="HotelInter">Inter</option>
<option value="HotelUnter">Unter</option>
</optgroup>
</select></label>
</p>
</form>
<hr>