dependable select boxes

[point]

Hello there...

I'm a PHP programmer and starting to learn JS...
I have a following problem....

I have 3 select boxes! one is hotel one is destination and one is
country...

if someone clicks selects the country then the destination select box shows
the destinations in that country and further if he chooses destination all
the hotels in in that destination are shown in hotel select
box....(everyth ing is from mysql database)

I don't have a clue how to do this or where to find some readings about it
and I really need that desperatly....

Thanx for any infoes...

Point

[Lasse Reichstein Nielsen]

Re: dependable select boxes

"point" <point@caanprod uction.com> writes:
[color=blue]
> I have 3 select boxes! one is hotel one is destination and one is
> country...
>
> if someone clicks selects the country then the destination select box shows
> the destinations in that country and further if he chooses destination all
> the hotels in in that destination are shown in hotel select
> box....(everyth ing is from mysql database)
>
> I don't have a clue how to do this or where to find some readings about it
> and I really need that desperatly....[/color]

This is a very common "problem" (it is not really a problem, it's
quite easy to fix).

<FAQENTRY>
You can add options to a select element using "selectRef. add" and
remove them with "selectRef.remo ve", although these functions are not
present in older browsers.

You need to keep the new data somewhere else, probably as an array of
text/value pairs.

The following function changes the options of a select element:
---
function setOptions(sele ctRef,optArray) {
var optsRef = selectRef.optio ns;
// Clear old options
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;
}
}
---
You can use this function from the onchange handler of another select element.
</FAQENTRY>

You need data like:
---
var data = new Array();
data[0] = new Array("Nothing" ,"");
data[1] = new Array("text A1","value A1","text A2","value A2");
data[2] = new Array("text B1","value B1","text B2","value B2");
---
and code like:
---
<form ...>
<select
onchange="setOp tions(this.form .elements['select2'],data[this.selectedIn dex])">
<option selected="selec ted">Nothing</option>
<option>A Options</option>
<option>B Options</option>
</select>
<select name="select2">
<option value="">Nothin g</option>
</select>
</form>
---

You *MUST* be aware that your page will not work for people without
javascript (either not available or turned off). You could start
out with populating your selects with all possible options, and then
use the above to set only those hotels that are in the correct
country, after the page has loaded. Then people without javascript can
still use the page, just not as easily.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

[Richard Cornford]

Re: dependable select boxes

"Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
news:ptk4xjcl.f sf@hotpop.com.. .
<snip>[color=blue]
>You need to keep the new data somewhere else, probably
>as an array of text/value pairs.[/color]
<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.

[ManoDestra]

Re: dependable select boxes

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" <richard@litote s.demon.co.uk> wrote in message
news:bfgn31$lp9 $1@titan.btinte rnet.com...[color=blue]
> "Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
> news:ptk4xjcl.f sf@hotpop.com.. .
> <snip>[color=green]
> >You need to keep the new data somewhere else, probably
> >as an array of text/value pairs.[/color]
> <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.
>
>[/color]

[point]

Re: dependable select boxes

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 " <manodestra.sof tware@ntlworld. com> wrote in message
news:wE1Ta.958$ %D3.318850@news fep2-gui.server.ntli .net...[color=blue]
> 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" <richard@litote s.demon.co.uk> wrote in message
> news:bfgn31$lp9 $1@titan.btinte rnet.com...[color=green]
> > "Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
> > news:ptk4xjcl.f sf@hotpop.com.. .
> > <snip>[color=darkred]
> > >You need to keep the new data somewhere else, probably
> > >as an array of text/value pairs.[/color]
> > <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.
> >
> >[/color]
>
>[/color]