Log in

View Full Version : City Chooser Drop Down?


eidna22
11-25-2013, 09:49 PM
I would like a script that would be a drop down almost like a state picker. So it will say "what city" you click and find the one you want and on click you are directed to the page about that city. Any ideas? Thanks!
mlegg
11-25-2013, 11:34 PM
would this work? http://jsbin.com/ayomar/3/edit
djr33
11-26-2013, 03:47 AM
Are you having trouble with the code? Or with the list of cities? Those are two separate problems.
For the first, something like mlegg posted would work, or any normal state dropdown.
For the second, that's not really a problem we can answer here (although you can search for an existing script on the internet to see if anyone came up with a list). Specifically, the problem is that you would need to choose a certain region-- listing all cities (in the world? in the country?) would be far too much.
molendijk
11-27-2013, 01:43 AM
Something like this?

<head>
<script>
//This script enables execution of scripts by putting them in the options of selectboxes (if the text of a given option corresponds with the contents of a given script, then the script is executed when the option is clicked on).
function load_script_container()
{var div_node=document.createElement('div');
div_node.setAttribute("id", "script_container");
document.body.appendChild(div_node);}
//window.onload=load_script_container

function javascript_in_selectbox(which_box) {
var optionValue=document.getElementById(which_box).options[document.getElementById(which_box).selectedIndex].value;
if (optionValue=="none") {}
else {
var script_inside_selectbox_option = document.createElement('script');
script_inside_selectbox_option.type = 'text/javascript';
script_inside_selectbox_option.text = optionValue;
while(document.getElementById("script_container").firstChild)
{document.getElementById("script_container").removeChild(document.getElementById("script_container").firstChild);}
document.getElementById("script_container").appendChild(script_inside_selectbox_option);
}
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", load_script_container, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", load_script_container );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
load_script_container();
};
}
else
window.onload = load_script_container;
}
</script>
</head>

<body>
<select id="choose_city" onchange="javascript_in_selectbox('choose_city'); selectedIndex=0" onfocus="selectedIndex=0" style="font-family: verdana; font-size: 11px; cursor: pointer; width:100px" >
<option value="none" selected >Choose city</option>
<optgroup label="&nbsp;United States" style="font-family:verdana;">
<option value="frames.cities.location.replace('http://www1.nyc.gov')">New York</option>
<option value="frames.cities.location.replace('http://www.sfgov.org/index.asp')">San Francisco</option>
</optgroup>
<option disabled>&nbsp;</option>
<optgroup label="&nbsp;The Netherlands" style="font-family:verdana;">
<option value="frames.cities.location.replace('http://nl.wikipedia.org/wiki/Amsterdam')">Amsterdam</option>
<option value="frames.cities.location.replace('http://www.nrc.nl/nieuws/2013/11/26/aardbevingen-groningen-mogelijk-nog-krachtiger/')">Groningen</option>
</optgroup>
</select> &nbsp;<span style="cursor: pointer" onclick="window.location.reload()">reset</span>

<div style="position: absolute; left: 10%; top: 10%; right: 10%; bottom: 10%; border: 0px">
<iframe name="cities" src="about:blank" frameborder="0" style="position: absolute; width: 100%; height: 100%"></iframe>
</div>

<script>
frames.cities.location='about:blank'
</script>
</body>