• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 293
  • Last Modified:

populate select from Javascipt multi dimensional array

I need to populate a select from a Javascipt array.

I have the PHP code (attached) and it functions correctly. I need to do this client side however.

Can someone duplicate this functionality in Javascript?

regards,

GJ
$verticals_arr = array('antiques-collectibles'=>"Antiques & Collectibles",'auto-dealers'=>"Auto Dealers",'beauty-salons-spas'=>"Beauty Salons & Spas",'catering-services'=>"Catering Services",'clothing-footwear'=>"Clothing & Footwear",'dentists'=>"Dentists",'electronics'=>"Electronics",'entertainment'=>"Entertainment",'financial-planners'=>"Financial Planners",'florists'=>"Florists",'furniture-stores'=>"Furniture Stores",'groceries-specialty-foods'=>"Groceries & Specialty Foods",'health-products-services'=>"Health Products & Services",'home-based-businesses'=>"Home Based Businesses",'home-decor'=>"Home Decor",'home-repairs-renovations'=>"Home Repairs & Renovations",'hotels'=>"Hotels",'legal-services'=>"Legal Services",'mortgage-brokers'=>"Mortgage Brokers",'real-estate-brokers'=>"Real Estate Brokers",'restaurants'=>"Restaurants",'sporting-goods-stores'=>"Sporting Goods Stores",'sports-recreation'=>"Sports & Recreation",'other'=>"Other");


    function showOptionsDrop($array){
        $string = '';
        foreach($array as $k => $v){        
            $string .= '<option value="'.$k.'">'.$v.'</option>'."\n";     
        }
        return $string;
    }
?>


<form method='post' name='selectform'>
<select name="verticals" onchange="doValue();">
    <option value="0">Choose a Vertical</option>
    <?php echo showOptionsDrop($verticals_arr); ?>
</select>
</form>

Open in new window

0
ggjones
Asked:
ggjones
  • 2
  • 2
2 Solutions
 
Michel PlungjanIT ExpertCommented:
Here
<html>
<head>
<script type="text/javascript">
$verticals_arr = { 'antiques-collectibles':"Antiques & Collectibles",'auto-dealers':"Auto Dealers",'beauty-salons-spas':"Beauty Salons & Spas",'catering-services':"Catering Services",'clothing-footwear':"Clothing & Footwear",'dentists':"Dentists",'electronics':"Electronics",'entertainment':"Entertainment",'financial-planners':"Financial Planners",'florists':"Florists",'furniture-stores':"Furniture Stores",'groceries-specialty-foods':"Groceries & Specialty Foods",'health-products-services':"Health Products & Services",'home-based-businesses':"Home Based Businesses",'home-decor':"Home Decor",'home-repairs-renovations':"Home Repairs & Renovations",'hotels':"Hotels",'legal-services':"Legal Services",'mortgage-brokers':"Mortgage Brokers",'real-estate-brokers':"Real Estate Brokers",'restaurants':"Restaurants",'sporting-goods-stores':"Sporting Goods Stores",'sports-recreation':"Sports & Recreation",'other':"Other"};
function showOptionsDrop(){
  var sel = document.selectform.verticals;
  for(o in $verticals_arr) {        
    sel.options[sel.options.length]=new Option($verticals_arr[o],o)                 
  }
}  
window.onload=function() {
  showOptionsDrop();
}  
</script>
</head>
<body>
<form method='post' name='selectform'>
<select name="verticals" onchange="doValue();">
    <option value="0">Choose a Vertical</option>
</select>
</form>
</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
	function populateSelect()
	{
		var arr1 = new Array();
		arr1[0] = "0";
		arr1[1] = "1";
		arr1[2] = "2";
		arr1[3] = "3";
		arr1[4] = "4";

		var selectObj = document.getElementById('select1');
		for ( var counter = 0; counter < arr1.length; counter++)
		{
		    
			selectObj.options[counter] = new Option(arr1[counter], arr1[counter]);
		}
	}
</script>
</HEAD>

<BODY BGCOLOR="#FFFFFF" onload='populateSelect()'>
 <select id='select1'>
 </select>
</BODY>
</HTML>

Open in new window

0
 
ggjonesAuthor Commented:
thanks mplungjan... that answers my queston :-)

A follow-up if I may :

do you know of a way to populate the array from a flat-file in JS, like one does in PHP?

It would have contents like this, I imagine:

'antiques-collectibles':"Antiques & Collectibles"
'auto-dealers':"Auto Dealers"
'beauty-salons-spas':"Beauty Salons & Spas"

Being able to do so would mean that I could share the list between several uses, and need to update in only one place.

many thanks,
GJ
0
 
Michel PlungjanIT ExpertCommented:
Just save this in a file called vertical.js
$verticals_arr = { 'antiques-collectibles':"Antiques & Collectibles",'auto-dealers':"Auto Dealers",'beauty-salons-spas':"Beauty Salons & Spas",'catering-services':"Catering Services",'clothing-footwear':"Clothing & Footwear",'dentists':"Dentists",'electronics':"Electronics",'entertainment':"Entertainment",'financial-planners':"Financial Planners",'florists':"Florists",'furniture-stores':"Furniture Stores",'groceries-specialty-foods':"Groceries & Specialty Foods",'health-products-services':"Health Products & Services",'home-based-businesses':"Home Based Businesses",'home-decor':"Home Decor",'home-repairs-renovations':"Home Repairs & Renovations",'hotels':"Hotels",'legal-services':"Legal Services",'mortgage-brokers':"Mortgage Brokers",'real-estate-brokers':"Real Estate Brokers",'restaurants':"Restaurants",'sporting-goods-stores':"Sporting Goods Stores",'sports-recreation':"Sports & Recreation",'other':"Other"};


and do

<html>
<head>
<script type="text/javascript" src="vertical.js"></script>
<script type="text/javascript">
function showOptionsDrop(){
  var sel = document.selectform.verticals;
  for(o in $verticals_arr) {        
    sel.options[sel.options.length]=new Option($verticals_arr[o],o)                 
  }
}  
window.onload=function() {
  if( $verticals_arr) showOptionsDrop();
}  
</script>
</head>
<body>
<form method='post' name='selectform'>
<select name="verticals" onchange="doValue();">
    <option value="0">Choose a Vertical</option>
</select>
</form>
</body>
</html>

Open in new window

0
 
ggjonesAuthor Commented:

How wonderfully simple! And it works for both JS and PHP.

Thanks mplungjan :-)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now