Creating Two Linked Dropdown Menus

Discussion in 'HTML & Website Design' started by travoholic, Jul 25, 2007.

  1. #1
    Hello,

    I want to have two dropdown menus that are related to each other. So when an option is chosen from the first list, a group of choices will come up in the second list that are specific to that choice. Similar to what's used when booking a flight... you choose where you're departing from in the first list and the second list will include only destinations that are served from that airport. I'd also like it to work in reverse where the second list can be accesses first ie. choose your destination, and the first list will populate with airports that service this destiantion for example.

    Once the options are chosen and the user hits 'Submit' I'd like them to be taken to a new page.

    Can someone direct me to a site that might have tutorials for this sort of thing? I'm not even really sure what to search for in Google.

    Thanks!
    Kirsty
     
    travoholic, Jul 25, 2007 IP
  2. killerj

    killerj Active Member

    Messages:
    765
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    95
    #2
    killerj, Jul 25, 2007 IP
  3. travoholic

    travoholic Well-Known Member

    Messages:
    299
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #3
    Sorry for bringing this post back from teh dead but I've only just got to this.

    Thanks for that link. I've set the menu up how I want it here: http://www.workingholidayinfo.com/chainedmenu.html

    I don't really know much about this stuff and barely managed to get this far so any help would be appreciated. The main this is figuring out how to make the 'Go' button take me to an actual webpage rather than have that window pop up with the URL in there.

    The second thing isn't so important and I suspect is pretty complicated. Is it possible to un-grey the second dropdown menu and have it so it works backwards. So I can choose from a huge list of countries in the second menu first and then the first menu will populate with the matching countries. Does that make sense?

    Thanks!!
     
    travoholic, Aug 4, 2007 IP
  4. killerj

    killerj Active Member

    Messages:
    765
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    95
    #4
    open config.js
    and change
    var onclickaction="alert"
    to
    var onclickaction="goto"

    as far as the 2nd point is concerned , it will need some extra bit of programming done . I'll look into it if i have time.
     
    killerj, Aug 5, 2007 IP
  5. travoholic

    travoholic Well-Known Member

    Messages:
    299
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #5
    travoholic, Aug 9, 2007 IP
  6. killerj

    killerj Active Member

    Messages:
    765
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    95
    #6
    I think you need to paste a copy of cinfig.js and the other javascript inside the Canadians folder ad it should work fine ;)
    or otherwise
    
    <script language="javascript" src="chainedmenu.js">
    
    	/***********************************************
    	* Chained Select Menu- By Xin Yang (http://www.yxscripts.com/) & Dynamic Drive (http://dynamicdrive.com)
    	* Script featured on/available at http://www.dynamicdrive.com/
    	* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    	* This notice must stay intact for legal use!
    	***********************************************/
    
    	</script>
    	<script language="javascript" src="config.js"></script>
    Code (markup):
    Find them in the affect page and replace these
    :
    
    <script language="javascript" src="../chainedmenu.js">
    
    	/***********************************************
    	* Chained Select Menu- By Xin Yang (http://www.yxscripts.com/) & Dynamic Drive (http://dynamicdrive.com)
    	* Script featured on/available at http://www.dynamicdrive.com/
    	* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    	* This notice must stay intact for legal use!
    	***********************************************/
    
    	</script>
    	<script language="javascript" src="../config.js"></script>
    
    Code (markup):
    they both work the same way though ;)
     
    killerj, Aug 10, 2007 IP