1 <!-- Start Main Content -->
   2 <div id="main">
   3 <style type="text/css">
   4 
   5 #SelectListForm { text-align:center; }
   6 #SelectListForm select{ width:400px; font-size:1.1em;}
   7 
   8 /* Thin Link Table */
   9 .ThinListTable { width:625px;}
  10 
  11 </style>
  12 
  13   <p>This page also demonstrates how to handle events from an HTML select or combo box using JQuery. Selecting one a list name causes the list displayed to be automatically inserted into the document. View the source to examine the page in detail.</p>
  14 
  15   <form id="SelectListForm">
  16     <select name="SelectList" id="ListSelect">
  17       <option value="main" selected="true">Main</option>
  18       <option value="home">Home</option>
  19       <option value="work">Work</option>
  20     </select>
  21   </form>
  22 
  23   <div class="ThinListTable">
  24   </div>
  25 
  26     
  27   <p><a href="javascript:getSource()">View Source</a></p> 
  28 
  29 <script type="text/javascript">
  30 
  31 var Blue = {
  32   obj:{}, // List Objects
  33   gen:{}  // General Functions
  34 }
  35 
  36 
  37 Blue.obj.List = function(newName){
  38   this.listName = newName;
  39   this.itemArr = new Array();
  40 }
  41 
  42 
  43 Blue.obj.List.prototype.addItem = function(newItem){
  44   this.itemArr.push(newItem);
  45 }
  46 
  47 Blue.obj.List.prototype.deleteItem = function(index){
  48   this.itemArr.splice(item);
  49 }
  50 
  51 Blue.obj.List.prototype.writeList= function(){
  52   var outStr = "<ul>\n";
  53   for (var item in this.itemArr) {
  54     outStr = outStr + "<li>" + this.itemArr[item] + "</li>\n";
  55   }
  56   outStr = outStr + "</ul>\n";
  57   $('.ThinListTable').html(outStr);
  58 }
  59 
  60 Blue.obj.List.prototype.printList = function(){
  61   alert(this.itemArr[1]);
  62 }
  63 
  64 
  65 Blue.gen.comboSelect = function(){
  66   listIndex = $('#ListSelect').val();
  67   if (listIndex == "main"){
  68     mainList.writeList();
  69     return;
  70   }
  71 
  72   if (listIndex == "home"){
  73     homeList.writeList();
  74     return;
  75   }
  76 
  77   if (listIndex == "work"){
  78     workList.writeList();
  79     return;
  80   }
  81   
  82 }
  83 
  84 
  85 
  86 // Your Source Code Here
  87 
  88 function start(){
  89 // Start function
  90 $('#ListSelect').change(Blue.gen.comboSelect);
  91 
  92 
  93 
  94 // Create Main List
  95 mainList = new Blue.obj.List("main");
  96 mainList.addItem("List Item 1");
  97 mainList.addItem("List Item 2");
  98 mainList.addItem("List Item 3");
  99 mainList.addItem("List Item 4");
 100 mainList.writeList();
 101 
 102 // Create Home List
 103 homeList = new Blue.obj.List("home");
 104 homeList.addItem("Apples");
 105 homeList.addItem("Milk");
 106 homeList.addItem("Bread");
 107 homeList.addItem("Chips");
 108 
 109 // Create Work List
 110 workList = new Blue.obj.List("work");
 111 workList.addItem('write email');
 112 workList.addItem('attend meeting');
 113 workList.addItem('deliver report')
 114 
 115 
 116 }
 117 
 118 $(document).ready(start);
 119 </script>
 120 
 121 </div>
 122 <!-- End Main Content -->
 123