Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2009
    Location
    Newcastle
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question 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:



    And this is the code behind it:

    Code:
        
    <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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Have a look at

    http://www.javascriptkit.com/script/...plecombo.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

  • #3
    New Coder
    Join Date
    Jun 2009
    Location
    Newcastle
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Another one is at:-

    http://www.javascriptkit.com/script/...plecombo.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.
    Last edited by Philip M; 06-17-2009 at 01:06 PM. Reason: Add note re java/javascript

  • #5
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    XJDX:

    Try it this way:

    Code:
    <!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>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •