...

View Full Version : choosing the values in a select statement



ynotlim
01-11-2007, 12:07 AM
using this code from ancora, see below:

I want the Value of the options to be the City names. IE, 44101= LA, 44107=Long Beach, etc.

so basically i need <Option Value='city_name'>44107</Option>, how do i assign the city name on the javascript?



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var zipCodes =[];
zipCodes["counties"] = ["Summit","Jefferson"];
zipCodes["Summit"] = ["44101","44107","44116","44135","44147"];
zipCodes["Jefferson"] = ["44221","44266","44270"];

function fillSelect(isValue,isNext){

isNext.length = 1;
var curr = zipCodes[isValue];
for (each in curr)
{
var nOption = document.createElement('option');
var isData = document.createTextNode(curr[each]);
nOption.setAttribute('value',curr[each]);
nOption.appendChild(isData);
isNext.appendChild(nOption);
}
}

function init(){

fillSelect('counties',document.forms[0]['county']);
}

onload=init;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:350px;margin:auto}
fieldset {background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008B;padding:5px}
select {font-family:times;font-size:10pt;margin:10px}
.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Zip Code</legend>
<select name='county' onchange="fillSelect(this.value,this.form['zipCode'])">
<option selected>Select Your County</option>
</select>
<select name='zipCode'>
<option selected >Select Your Zip Code</option>
</select>
<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>

david_kw
01-11-2007, 10:58 PM
You just need another set of data with the information then place it using the setAttribute function instead of the zip code itself.



var cityNames = [];
cityNames["counties"] = ["Summit","Jefferson"];
cityNames["Summit"] = ["44101","44107","44116","44135","44147"];
cityNames["Jefferson"] = ["Luthorville", "Lexton", "Otisburg"];

function fillSelect(isValue,isNext){
isNext.length = 1;
var curr = zipCodes[isValue];
var name = cityNames[isValue];
for (each in curr)
{
var nOption = document.createElement('option');
var isData = document.createTextNode(curr[each]);
nOption.setAttribute('value',name[each]);
nOption.appendChild(isData);
isNext.appendChild(nOption);
}
}


david_kw



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum