SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Parent and Child in Safari?

    Hi

    I have a webdeveloper creating a site for me. There is a drop down menu which features countries then below that there are states. What I want to happen is you choose a country then in the menu below that you only see the states related to that country. What happens in safari is you pick a country then below that you see all the states, is there a way he can make this work? At the moment he thinks there isn't. It works Ok in firefox and netscape.

    Thank you

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without the code or a link to the site we can't help, but it can be done.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will do what you ask, as well as allow the form to still work if no Javascript is turned on:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<script type="text/javascript"><!--
    
    function changeCountry() {
    	//remove current options - yeah, not DOM, but faster
    	stateSelect.innerHTML = null;
    	//set states from array
    	stateSelect.appendChild(countries[this.value]);
    }
    
    var countries = new Array();
    var countrySelect, stateSelect, optgroups;
    window.onload = function() {
    	if (document.getElementById) {
    		//define selectboxes as variables
    		countrySelect = document.getElementById("country");
    		stateSelect = document.getElementById("state")
    		//set country change function
    		countrySelect.onchange = changeCountry;
    		//get optgroups
    		optgroups = stateSelect.getElementsByTagName("optgroup");
    		//loop thru optgroups, put each in ***. array, then remove
    		for (i=optgroups.length-1; i>=0; i--) {
    			countries[optgroups[i].label] = stateSelect.removeChild(optgroups[i]);
    		}
    		//set initial value
    		stateSelect.appendChild(countries[countrySelect.value])
    	}
    }
    
    //-->
    </script>
    	</head>
    
    	<body>
    		<select id="country">
    			<option value="United States">United States</option>			
    			<option value="Canada">Canada</option>			
    			<option value="Mexico">Mexico</option>			
    		</select>
    		<select id="state">
    			<optgroup label="United States">
    				<option value="AK">Alaska</option>
    				<option value="AL">Alabama</option>
    				<option value="AR">Arkansas</option>
    				<option value="AZ">Arizona</option>
    				<option value="CA">California</option>
    				<option value="CO">Colorado</option>
    				<option value="CT">Connecticut</option>
    				<option value="DC">District of Columbia</option>
    				<option value="DE">Delaware</option>
    				<option value="FL">Florida</option>
    				<option value="GA">Georgia</option>
    				<option value="HI">Hawaii</option>
    				<option value="IA">Iowa</option>
    				<option value="ID">Idaho</option>
    				<option value="IL">Illinois</option>
    				<option value="IN">Indiana</option>
    				<option value="KS">Kansas</option>
    				<option value="KY">Kentucky</option>
    				<option value="LA">Louisiana</option>
    				<option value="MA">Massachusetts</option>
    				<option value="MD">Maryland</option>
    				<option value="ME">Maine</option>
    				<option value="MI">Michigan</option>
    				<option value="MN">Minnesota</option>
    				<option value="MO">Missouri</option>
    				<option value="MS">Mississippi</option>
    				<option value="MT">Montana</option>
    				<option value="NC">North Carolina</option>
    				<option value="ND">North Dakota</option>
    				<option value="NE">Nebraska</option>
    				<option value="NH">New Hampshire</option>
    				<option value="NJ">New Jersey</option>
    				<option value="NM">New Mexico</option>
    				<option value="NV">Nevada</option>
    				<option value="NY">New York</option>
    				<option value="OH">Ohio</option>
    				<option value="OK">Oklahoma</option>
    				<option value="OR">Oregon</option>
    				<option value="PA">Pennsylvania</option>
    				<option value="RI">Rhode Island</option>
    				<option value="SC">South Carolina</option>
    				<option value="SD">South Dakota</option>
    				<option value="TN">Tennessee</option>
    				<option value="TX">Texas</option>
    				<option value="UT">Utah</option>
    				<option value="VA">Virginia</option>
    				<option value="VT">Vermont</option>
    				<option value="WA">Washington</option>
    				<option value="WI">Wisconsin</option>
    				<option value="WV">West Virginia</option>
    				<option value="WY">Wyoming</option>
    			</optgroup>
    			<optgroup label="Canada">
    				<option value="ab">Alberta</option>
    				<option value="bc">British Columbia</option>
    				<option value="mb">Manitoba</option>
    				<option value="nb">New Brunswick</option>
    				<option value="nf">Newfoundland &amp; Labrador</option>
    				<option value="nt">Northwest Territories</option>
    				<option value="ns">Nova Scotia</option>
    				<option value="nu">Nunavut</option>
    				<option value="on">Ontario</option>
    				<option value="pe">Prince Edward Island</option>
    				<option value="pq">Quebec</option>
    				<option value="sa">Saskatchewan</option>
    				<option value="yt">Yukon</option>
    			</optgroup>
    			<optgroup label="Mexico">
    				<option value="Aguascalientes">Aguascalientes</option>
    				<option value="Baja California">Baja California</option>
    				<option value="Baja California Sur">Baja California Sur</option>
    				<option value="Campeche">Campeche</option>
    				<option value="Chiapas">Chiapas</option>
    				<option value="Chihuahua">Chihuahua</option>
    				<option value="Coahuila">Coahuila</option>
    				<option value="Colima">Colima</option>
    				<option value="Distrito Federal">Distrito Federal</option>
    				<option value="Durango">Durango</option>
    				<option value="Guanajuato">Guanajuato</option>
    				<option value="Guerrero">Guerrero</option>
    				<option value="Hidalgo">Hidalgo</option>
    				<option value="Jalisco">Jalisco</option>
    				<option value="Mexico">Mexico</option>
    				<option value="Michoacan">Michoacán</option>
    				<option value="Morelos">Morelos</option>
    				<option value="Nayarit">Nayarit</option>
    				<option value="Nuevo Leon">Nuevo León</option>
    				<option value="Oaxaca">Oaxaca</option>
    				<option value="Puebla">Puebla</option>
    				<option value="Queretaro">Querétaro</option>
    				<option value="Quintana Roo">Quintana Roo</option>
    				<option value="San Luis Potosi">San Luis Potosi</option>
    				<option value="Sinaloa">Sinaloa</option>
    				<option value="Sonora">Sonora</option>
    				<option value="Tabasco">Tabasco</option>
    				<option value="Tamaulipas">Tamaulipas</option>
    				<option value="Tlaxcala">Tlaxcala</option>
    				<option value="Veracruz">Veracruz</option>
    				<option value="Yucatan">Yucatan</option>
    				<option value="Zacatecas">Zacatecas</option>
    			</optgroup>
    		</select>
    	</body>
    
    </html>
    A quick test showed it works in IE6, Safari 2 and Firefox 2.

    Sounds like you need a better web guy

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks for your help

    Thanks a lot, at the moment it is on their server at http://www.projects.blackmoondev.com/jobhunt/


Bookmarks

Posting Permissions

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