Help populating a JS drop down menu please [Archive]

View Full Version : Help populating a JS drop down menu please

Dolemite50

07-27-2005, 12:47 AM

Hi,

I am using the following code to give members a location choice via drop downs. (Many countries and locations removed for size of post)
var africaArray = new Array("('Select country','',true,true)",
"('Ethiopia')",
"('Somalia')",
"('South Africa')",
"('Other')");
var middleeastArray = new Array("('Select country','',true,true)",
"('Egypt')",
"('Iran')",
"('Israel')",
...
var asiaArray = new Array("('Select country','',true,true)",
"('Armenia')",
"('Bangladesh')",
"('Cambodia')",
...
var europeArray = new Array("('Select country','',true,true)",
"('Albania')",
"('Austria')",
"('Belarus')",
...
var australiaArray = new Array("('Select country','',true,true)",
"('Australia')",
"('New Zealand')",
"('Other')");
var lamericaArray = new Array("('Select country','',true,true)",
"('Costa Rica')",
"('Cuba')",
...
var namericaArray = new Array("('Select country','',true,true)",
"('Canada')",
"('USA')",
"('Other')");
var samericaArray = new Array("('Select country','',true,true)",
"('Argentina')",
"('Bolivia')",
...
function populateCountry(inForm,selected) {
var selectedArray = eval(selected + "Array");
while (selectedArray.length < inForm.country.options.length) {
inForm.country.options[(inForm.country.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + selectedArray[i]);
}
if (inForm.region.options[0].value == '') {
inForm.region.options[0]= null;
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0);
}

}
}
}
function populateUSstate(inForm,selected) {
var stateArray = new Array("('Select State','',true,true)",
"('Alabama')",
"('Alaska')",
"('Arizona')",
...
if (selected == 'USA') {
for (var i=0; i < stateArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + stateArray[i]);
}
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0)
}
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0)
}
}
}
}
else {
}
if (selected == 'Other') {
newCountry = "";
while (newCountry == ""){
newCountry=prompt ("Please enter the name of your country.", "");
}
if (newCountry != null) {
inForm.country.options[(inForm.country.options.length-1)]=new Option(newCountry,newCountry,true,true);
inForm.country.options[inForm.country.options.length]=new Option('Other, not listed','Other');
}
}
if(inForm.country.options[0].text == 'Select country') {
inForm.country.options[0]= null;
}
}
// End -->
</script>

I would like to be able to code it so that when they go back to edit their info it "remembers" their selection by pulling it from the DB. I can get the info from the DB just fine. I currently use this method for populating the standard drop downs but am unsure how to go about it for the JS drop downs.
<select name="sgenre2" class="listmenus" id="sgenre2">
<option value="ag">All Genres</option>
<option <?php if(isset($genre)&&$genre=='Acoustic'){echo('selected');} ?>>Acoustic</option>
<option <?php if(isset($genre)&&$genre=='Alternative'){echo('selected');} ?>>Alternative</option>
..............
</select>

Thanks for any advice.

martin_narg

07-27-2005, 12:42 PM

This is the javascript code to do what you require. Simply write out your string from the database where indicated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function setSelect(objSelect, strValue) {
for(var i=0; i<objSelect.options.length; i++) {
if(objSelect.options[i].value == strValue) {
objSelect.selectedIndex = i;
}
}
}
window.onload = function() {
// usage: setSelect(form object, string from database)
setSelect(document.frm.selCountry, "United Kingdom");

// you can change more than one select by adding more here
// eg: setSelect(document.anotherForm.anotherSelect, "anotherValue");
}
</script>
</head>

<body>
<form name="frm">
<select name="selCountry">
<option>Please select a country</option>
<option value="USA">USA</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Australia">Australia</option>
<option value="Malaysia">Malaysia</option>
</select>
</form>
</body>
</html>

Hope this helps

m_n

glenngv

07-27-2005, 01:14 PM

You need to break out of the loop to avoid useless iterations especially that the comboboxes have several items.

for(var i=0; i<objSelect.options.length; i++) {
if(objSelect.options[i].value == strValue) {
objSelect.selectedIndex = i;
break;
}
}

martin_narg

07-27-2005, 01:20 PM

Yes you do, nice one glenngv.

Cheers mate :thumbsup: , forgot to put that in.

m_n

Dolemite50

07-28-2005, 04:54 AM

Hi Gents!

Thank you kindly for the help and please allow me to point out the fact that I am a moron. :D

When I posted the script last night I forgot to paste the current code for the selection boxes. It actually dawned on me that I forgot it while laying in bed at 4am,..is that pathetic or what? hehe

Anyhoo, here is the current selection box code. I'm still a complete JS newb so I'm hoping that I can bother you again to show me how to alter this existing code to use your techniques. On the current dropdowns, after you select the region the right populates with countries. If somebody chooses USA as the country then the right menu re-populates with the 50 states. I thought I'd mention that in case it somehow throws a wrench in the machinery.

Box1:
<select name="region" class="listmenus" onChange="populateCountry(document.form1,document.form1.region.options[document.form1.region.selectedIndex].value)">
<option selected value=''>Select Region</option>
<option value='asia'>Asia</option>
<option value='africa'>Africa</option>
<option value='australia'>Australia</option>
<option value='europe'>Europe</option>
<option value='middleeast'>Middle East</option>
<option value='lamerica'>Latin America</option>
<option value='namerica'>North America</option>
<option value='samerica'>South America</option>
</select>
Box2:
<select name="country" class="listmenus" onChange="populateUSstate(document.form1,document.form1.country.options[document.form1.country.selectedIndex].text)">
<option value=''><--------------------</option>
</select>

I can populate the first menu using these type statements:
....
$region = $row['region'];
<option <?php if(isset($region)&&$region=='namerica'){echo('selected');} ?>>North America</option>
<option <?php if(isset($region)&&$region=='samerica'){echo('selected');} ?>>South America</option>

Which works, but always gives me the impression that it's somehow overkill. As for the second box,.I'm completely lost. I've considered an array that would stretch across Canada, but beyond that I haven't a clue. Can somebody be so kind as to show me how to apply your approaches to my current code? I'm not being lazy, I'm just lost. :(

Thanks a lot, I really appreciate it. :)

glenngv

07-28-2005, 09:24 AM

You may want to check this (http://www.ashleyit.com/rs/jsrs/select/php/select.php) out.