Enable next drop down in select form

The website I'm currently developing has a search area where users can narrow down where or what service they would like to view.

The problem I'm having is, I have certain things that fall into only certain areas.

Here is the actual form:

http://www.xgfx.co.uk/drop-downs.jpg

And this is the code behind it:


<form id="ticsearch" action="searchtic.php">
<select name="country">
<option value="1">Select Country...</option>
<option value="2">England</option>
<option value="3">Ireland</option>
<option value="4">Northern Ireland</option>
<option value="5">Scotland</option>
<option value="6">Wales</option>
</select>

<select name="region">
<option value="7">Select Region...</option>
<option value="8">England's North West</option>
<option value="9">Mid Wales</option>
<option value="10">North East England</option>
<option value="11">North Wales</option>
<option value="12">South East Wales</option>
<option value="13">South West Wales</option>
<option value="14">Southern Scotland</option>
<option value="15">West Hignlands &amp; Islands</option>
<option value="16">Yorkshire</option>
</select>

<select name="place">
<option value="17">Select Place...</option>
<option value="18">Captain Cook Country</option>
<option value="19">City of Nottingham</option>
<option value="20">County Durham</option>
<option value="21">Cowal Peninsula in Argyll</option>
<option value="22">Dumfries &amp; Galloway</option>
<option value="23">Durham</option>
<option value="24">Hadrian's Wall Country</option>
<option value="25">Heartbeat Country</option>
<option value="26">Herriot Country</option>
<option value="27">Historic Durham City</option>
<option value="28">North York Moors</option>
<option value="29">North York Moors</option>
<option value="30">North Yorkshire</option>
<option value="31">North Yorkshire Coast</option>
<option value="32">North Yorkshire Dales</option>
<option value="33">Northern Yorkshire Dales</option>
<option value="34">Northumberland</option>
<option value="35">Northumberland Coast</option>
<option value="36">Northumberland's Cheviots</option>
<option value="37">Scottish Borders</option>
<option value="38">South Yorkshire Dales</option>
<option value="39">Southern Yorkshire Dales</option>
<option value="40">Summer Wine Country</option>
<option value="41">Tees Valley</option>
<option value="42">Teesdale</option>
<option value="43">Teesdale &amp; The High Pennines</option>
<option value="44">The City of Edinburgh</option>
<option value="45">The Durham Dales</option>
<option value="46">The Eden Valley</option>
<option value="47">The Lake District</option>
<option value="48">Weardale</option>
<option value="49">Weardale &amp; Wear Valley</option>
<option value="50">Weardale &amp; Wear Valley</option>
<option value="51">West Yorkshire</option>
</select>

<select name="type" class="styled">
<option value="52">Select Category...</option>
<option value="53">Accommodation</option>
<option value="54">Crafts &amp; Craftsmen</option>
<option value="55">Eating Out</option>
<option value="56">Functions &amp; Events</option>
<option value="57">Services</option>
<option value="58">Shopping</option>
<option value="59">Sport &amp; Leisure</option>
<option value="60">Sports Activity</option>
<option value="61">Visitor Attractions</option>
</select>

<select name="category">
<option value="62">Select Sub Category...</option>
<option value="63">Activity Centres</option>
<option value="64">Bed &amp; Breakfast</option>
<option value="65">Breweries &amp; Distilleries</option>
<option value="66">Bunk Barns</option>
<option value="67">Camping Sites</option>
<option value="68">Castles &amp; Abbeys</option>
<option value="69">Chalets &amp; Lodges</option>
<option value="70">Craft Outlets</option>
<option value="71">Craft Shops</option>
<option value="72">Craft Workshops</option>
<option value="73">Guest Houses</option>
<option value="74">Heritage Attractions</option>
<option value="75">Heritage Railways</option>
<option value="76">Holiday Caravan</option>
<option value="77">Holiday Cottage</option>
<option value="78">Hotels</option>
<option value="79">Individual Shops</option>
<option value="80">Inn Accommodation</option>
<option value="81">Inn Food &amp; Refreshment</option>
<option value="82">Museums &amp; Galleries</option>
<option value="83">Restaurants</option>
<option value="84">River Cruises</option>
<option value="85">Self Catering</option>
<option value="86">Shopping Centres</option>
<option value="87">Tea Rooms &amp; Coffee Shops</option>
<option value="87">Touring Caravan Sites</option>
</select>

<input type="submit" value="Search the website &raquo;" class="ticsearchbutton" />
</form>


Now say for example a user clicked on the first drop down 'Select Country' and selected 'Wales' the next drop down beneath for the 'Region' would only display the options associated with that Country.

Hope I've explained things well enough for my first post, look forward to becoming a part of this community, thanks in advance :thumbsup:

Have a look at

http://www.javascriptkit.com/script/script2/triplecombo.shtml

which should point the way.


"Money does not bring happiness, but it does enable you to be miserable in comfort". - Philip M's personal mantra

Thanks Phillip, just a little bit more than I was after, my java skills are basic at best, I messed on for ages but just couldn't get things to sit how I wanted. Any other links you could point me in the direction of?

Another one is at:-

http://www.javascriptkit.com/script/script2/multiplecombo.shtml

But what you are asking for is a moderately advanced concept, involving quite a lot of work, so if your own skills are basic and this is a commercial site it might be best to post this in the web projects section.

Be aware that Java and Javascript are entirely different programming languages, in spite of the confusingly similar names.

XJDX:

Try it this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<script type="text/javascript">

var categories = [];
categories["startList"] = ["Apparel","Books"]
categories["Apparel"] = ["Men","Women"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts"];
categories["Women"] = ["Blouses","Skirts","Scarves"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science","Romance"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];

var nLists = 3; // number of lists in the set

function fillSelect(currCat,currList){

var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++)
{
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat)
{
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(isValue){

alert(isValue);
}


function init(){

fillSelect('startList',document.forms[0]['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body>
<form action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List3' onchange="getValue(this.value)">
<option selected >Make a selection</option>
</select>
</form>
</body>
</html>

See also:-

http://www.codingforums.com/showthread.php?t=169465