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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Select Menu influencing other select menus.

    I am trying to create a select menu that will influence other select menus in my script. I hope to have a list of countries where i can select a country, then depending on what country i select I'll be displaying a list of states/ provinces, then with those i'll be able to have a city selection list. Currently I am working just on the the country and states. I hope if i can get that done i'll under stand the rest. well anyways here is my code please tell me what i am doing wrong and help me fix this:

    Code:
    <html>
      <head>
    <script type='text/javascript'>
    		Event.observe($("country"), "change"; function() {
    			if (onchange(country) == "Canada")
    				$("province-canada").show();
    			else
    				$("province-canada").hide();
    			if (onchange(country) == "United States")
    					$("province-us").show();
    			else
    				$("province-us").hide();
    		});
    </script>
      </head>
    
      <body>
        <form>
    <select id='country' onchange='country'>
    	<option> Canada </option>
    	<option> United States </option>
    </select>
    	  
     <select id="province-canada">
              <option>Alberta</option>
              <option>British Columbia</option>
              <option>Ontario</option>
            </select>
    
        <select id="province-us">
              <option>Ohio</option>
              <option>Michigan</option>
              <option>Kentucky</option>
            </select>
    		
        </form>  
      </body>
    </html>

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Silicon Valley California
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, first, i'm not sure what your "onchange(country)" function does. It would make more sense to use Prototype's built in "$F" function to find the value of the options. To start, change your options from

    Code:
    <option>Alberta</option>
    to
    Code:
    <option value="Alberta">Alberta</option>
    then try this

    Code:
    Event.observe("country", "change"; function(e) {
    	if ($F(country) == "Canada") {
    		$("province-canada").show();
    	}
    	else {
    		$("province-canada").hide();
    	}
    
    	if ($F(country) == "United States") {
    		$("province-us").show();
    	}
    	else {
    		$("province-us").hide();
    	}
    });
    I'm not sure if the Prototype guys changed their design, but $ Function didn't used to attach Functions to the element. Before v. 1.5.1 you need to do

    Code:
    Element.show("province-canada");
    and
    Code:
    Element.hide("province-canada");
    If you are going to have a lot of hidden province elements, you will probably want to re-architect your code without a ton of if/else statements. If you attach a class to the hidden selects, like 'hidden' that has the style 'display:none', and use another class list 'show' to override the display. Then you can use document.getElementByClassName('show', parentElement); to quickly find the currently visible select and hide it. Then you just need to use a good naming schema to map the selected country to the province id to grab the select to show.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cyberlogi View Post
    Well, first, i'm not sure what your "onchange(country)" function does. It would make more sense to use Prototype's built in "$F" function to find the value of the options. To start, change your options from

    Code:
    <option>Alberta</option>
    to
    Code:
    <option value="Alberta">Alberta</option>
    then try this

    Code:
    Event.observe("country", "change"; function(e) {
    	if ($F(country) == "Canada") {
    		$("province-canada").show();
    	}
    	else {
    		$("province-canada").hide();
    	}
    
    	if ($F(country) == "United States") {
    		$("province-us").show();
    	}
    	else {
    		$("province-us").hide();
    	}
    });
    I'm not sure if the Prototype guys changed their design, but $ Function didn't used to attach Functions to the element. Before v. 1.5.1 you need to do

    Code:
    Element.show("province-canada");
    and
    Code:
    Element.hide("province-canada");
    If you are going to have a lot of hidden province elements, you will probably want to re-architect your code without a ton of if/else statements. If you attach a class to the hidden selects, like 'hidden' that has the style 'display:none', and use another class list 'show' to override the display. Then you can use document.getElementByClassName('show', parentElement); to quickly find the currently visible select and hide it. Then you just need to use a good naming schema to map the selected country to the province id to grab the select to show.

    Everything will be hidden exept the provinces / states for the selected country. I was wanting to make somthing like the search on zorpia.com or... http://www.pinkbike.com/photo/ for the photos. but I am really new to java script so I don't under stand much. I thought origianlly I can just do onchange function of the country and then it'll change the province/ state


  •  

    Posting Permissions

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