dependable select boxes

P

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....(everything 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
 
L

Lasse Reichstein Nielsen

point said:
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....(everything 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....

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.remove", 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(selectRef,optArray) {
var optsRef = selectRef.options;
// Clear old options
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;
}
}
---
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="setOptions(this.form.elements['select2'],data[this.selectedIndex])">
<option selected="selected">Nothing</option>
<option>A Options</option>
<option>B Options</option>
</select>
<select name="select2">
<option value="">Nothing</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
 
R

Richard Cornford

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.
 
M

ManoDestra

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.
 
P

point

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top