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["CtryAustri a"] = new Array("Vienna", "CityVienna ",
"SalzBurg", "CitySalzburg") ;
CountryCity["CtryCroati a"] = new Array("Zagreb", "CityZagreb ",
"Split", "CitySplit" )
var CityHotel = new Object();
CityHotel["CityVienna "] = new Array("Palace", "HotelPalac e",
"Royal", "HotelRoyal ");
CityHotel["CitySalzbu rg"] = new Array("Sheraton ", "HotelSheraton" ,
"Lukas", "HotelLukas ");
CityHotel["CityZagreb "] = new Array("Opera", "HotelOpera ",
"Conti", "HotelConti ");
CityHotel["CitySplit"] = new Array("Inter", "HotelInter ",
"Unter", "HotelUnter ");
function setOptions(sele ctRef,optArray) {
var optsRef = selectRef.optio ns;
// Clear old options
if (selectRef.remo veChild) { // DOM to remove optgroups as well as options
while(selectRef .hasChildNodes( )) {
selectRef.remov eChild(selectRe f.firstChild);
}
}
optsRef.length = 0;
// Insert new options
for (var i = 0 ; i < optArray.length-1 ; i += 2) {
var opt = new Option(optArray[i],optArray[i+1]); // text,value
optsRef[optsRef.length] = opt;
}
}
function onChangeCtry(se lRef) {
var value = selRef.options[selRef.selected Index].value;
var citySel = selRef.form.ele ments['citySel'];
setOptions(city Sel,CountryCity[value]);
citySel.options[0].selected = true;
onChangeCity(ci tySel);
}
function onChangeCity(se lRef) {
var value = selRef.options[selRef.selected Index].value;
var hotelSel = selRef.form.ele ments['hotelSel'];
setOptions(hote lSel,CityHotel[value]);
hotelSel.option s[0].selected=true;
}
function init() {
onChangeCtry(do cument.forms['form1'].elements['countrySel']);
onChangeCtry(do cument.forms['form2'].elements['countrySel']);
}
</script>
</head>
<body onload="init(); ">
<h1>Hotel Selection</h1>
<form name="form1" action="">
<p><label for="countrySel ">Country:
<select name="countrySe l" onchange="onCha ngeCtry(this)">
<option value="CtryAust ria">Austria</option>
<option value="CtryCroa tia">Croatia</option>
</select></label>
</p>
<p><label for="citySel">C ity:
<select name="citySel" onchange="onCha ngeCity(this)">
<option value="CityVien na">Vienna</option>
<option value="CitySalz burg">Salzburg</option>
<option value="CityZagr eb">Zagreb</option>
<option value="CitySpli t">Split</option>
</select></label>
</p>
<p><label for="hotelSel"> Hotel:
<select name="hotelSel" >
<option value="HotelPal ace">Palace</option>
<option value="HotelRoy al">Royal</option>
<option value="HotelShe raton">Sheraton </option>
<option value="HotelLuk as">Lukas</option>
<option value="HotelOpe ra">Opera</option>
<option value="HotelCon ti">Conti</option>
<option value="HotelInt er">Inter</option>
<option value="HotelUnt er">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="countrySe l" onchange="onCha ngeCtry(this)">
<option value="CtryAust ria">Austria</option>
<option value="CtryCroa tia">Croatia</option>
</select></label>
</p>
<p><label for="citySel">C ity:
<select name="citySel" onchange="onCha ngeCity(this)">
<optgroup label="Austria" >
<option value="CityVien na">Vienna</option>
<option value="CitySalz burg">Salzburg</option>
</optgroup>
<optgroup name="Croatia">
<option value="CityZagr eb">Zagreb</option>
<option value="CitySpli t">Split</option>
</optgroup>
</select></label>
</p>
<p><label for="hotelSel"> Hotel:
<select name="hotelSel" >
<optgroup label="Vienna">
<option value="HotelPal ace">Palace</option>
<option value="HotelRoy al">Royal</option>
</optgroup>
<optgroup label="Salzburg ">
<option value="HotelShe raton">Sheraton </option>
<option value="HotelLuk as">Lukas</option>
</optgroup>
<optgroup label="Zagreb">
<option value="HotelOpe ra">Opera</option>
<option value="HotelCon ti">Conti</option>
</optgroup>
<optgroup label="Split">
<option value="HotelInt er">Inter</option>
<option value="HotelUnt er">Unter</option>
</optgroup>
</select></label>
</p>
</form>
<hr>
"ManoDestra " <ma************ *****@ntlworld. com> wrote in message
news:wE******** **********@news fep2-gui.server.ntli .net...
I like the solution below. You could also use the onChange event of the
select boxes to submit the form and then recalculate what should be in the
boxes accordingly. Separate screens would probably be a better design.
P.
"Richard Cornford" <ri*****@litote s.demon.co.uk> wrote in message
news:bf******** **@titan.btinte rnet.com... "Lasse Reichstein Nielsen" <lr*@hotpop.com > wrote in message
news:pt******** **@hotpop.com.. .
<snip>You need to keep the new data somewhere else, probably
as an array of text/value pairs.
<snip>
I have never liked solutions to this problem that use JavaScript arrays
of name value pairs. The result is always dependant on JavaScript and
thus will not be usable if JavaScript is not available. If the data
(text/value pairs) is defined in the HTML as options in a very long
select list (with JavaScript recording the values before removing the
unwanted ones) or as multiple select elements with a list each (in which
case JavaScript would hide the unwanted select elements and swap them
when needed) then the form could remain usable (if confusing) in the
absence of JavaScript.
A more robust alternative might be to re-work the form into a "wizard"
style interface, with each dependant select element being created
server-side based on the results from the submission of the previous
page.
Richard.