Dynamic Menus

**wow** · 07-28-2012 07:57 PM

Hi there,

There are two select in the following code. When the first (rMenu) changes, want the second (mItem) changed accordingly. But when the first is changed, the second doesn't. Could you tell where is the problem and help correct the JavaScript code?

Thanks,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dymanic Menus</title>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>

<script type="text/javascript">
var menu11=[38,39,40,41];
var menu12=['SALADS','SOUP','EGG FOO YOUNG','APPETIZERS'];
var menu21=[57,58,59,60,61];
var menu22=['APPETIZERS','FROM THE TORTILLA BAR','BURRIOS','SPECIALIES','PASTA'];
var menu31=[56],
var menu32=['WEEKDAY LUNCH SPECIAL'];
var menu41=[20,21,22];
var menu42=['Salads &amp; Breads','Appetizers','soup'];

// Select a menu according to mnstr
function selectMenu(mn) {

  var opt = document.getElementById("mItem").options;
  opt.length = 0;
  switch (mn)	{
  case '1':
	for(var i=0; i<menu11.length; i++) {
	    opt[i] = new Option(menu12[i],menu11[i]);
	}
	break;
  case '2':
	for(var i=0; i<menu21.length; i++) {
	    opt[i] = new Option(menu22[i],menu21[i]);
	}
	break;
  case '3':
 	for(var i=0; i<menu31.length; i++) {
	    opt[i] = new Option(menu32[i],menu31[i]);
	}
	break;
  case '4':
 	for(var i=0; i<menu41.length; i++) {
		opt[i] = new Option(menu42[i],menu41[i]);
	}
	break;
  }
  document.getElementById("mItem").selectedIndex = 0;
  return;
}

$(document).ready(function() {

	$("#rMenu").change(function() {
			selectMenu($(this).val());
	});
});
</script>
</head>
<body>
<form method="post" action="testdyn.php" id="fRest">
  <select name="rMenu" id="rMenu">
	  <option value="1">Breakfast</option>
	  <option value="2">Dinner</option>
	  <option value="3">Lunch</option>
	  <option value="4">Normal</option></select> -
	<select name="mItem" id="mItem">
	  <option value="38">SALADS</option>
	  <option value="39">SOUP</option>
	  <option value="40">EGG FOO YOUNG</option>
	  <option value="41">APPETIZERS</option></select>
</form>
</body></html>

Thread: Dynamic Menus

Thread Tools

Display

Dynamic Menus

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions