www.webdeveloper.com
Results 1 to 1 of 1

Thread: Dynamic Menus

  1. #1
    Join Date
    Feb 2011
    Posts
    82

    Dynamic Menus

    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>
    Last edited by wow; 07-28-2012 at 08:02 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles