dependable select boxes
point
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
Lasse Reichstein Nielsen
> 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[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="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
--
Lasse Reichstein Nielsen - l...@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Richard Cornford
news:ptk4xj...@hotpop.com...
<snip>
>You need to keep the new data somewhere else, probably
>as an array of text/value pairs.
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
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" <ric...@litotes.demon.co.uk> wrote in message
news:bfgn31$lp9$1...@titan.btinternet.com...
point
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[i],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>
"ManoDestra" <manodestr...@ntlworld.com> wrote in message
news:wE1Ta.958$%D3.3...@newsfep2-gui.server.ntli.net...
Lasse Reichstein Nielsen
> 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....
An easier to read version would be
<URL:http://www.infimum.dk/privat/hotels.html>
(and it's with and witohut option groups, because I think option groups
is the best way to subdivide the full set of options for people with no
javascript - try turning javascript off and see.)
> 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...
Tou have to build the data arrays from the database, as well as the initial
contents of the select boxes.
The structure I picked for the data array were, e.g.,
var CountryCity = new Object; /* a mapping from country value to city data */
CountryCity["CtryAustria"] = ["Vienna","CityVienna",
"Salzburg","CitySalzburg"];
CountryCity["CtryCroatia"] = ["Zagreb","CityZagreb",
"Split","CitySplit"];
With a mapping like this, where the lists are text/value pairs for the
option elements, I can use the *value* of the "country" select element to
find the new option data for the "city" select element by writing
CountryCity[countrySelectRef.value]
You must build tables like this from your database data. How you do that
depends on your server-side language, which you probably know more about
that me :)
Please don't top post and remember to crop your quotes.
Richard Cornford
<snip>
>Tou have to build the data arrays from the database, as
>well as the initial contents of the select boxes.
It was partly because of my server scripting experience that I was
proposing that the data should be entirely written into the HTML option
elements. The JavaScript can read the value/text information from there
and I found little more annoying while writing JSPs than having to write
the same data into an output page in multiple locations and formats.
Richard.