相依性選單 JQuery Cascade

仿露天商品分類選單

Index.jsp

 
  
 
 
 
 
 
  


 

Hello World!

  電腦
  書籍
  遊戲
  
 
  
 
  

Index.js

$(function () {
 // select1對應select2
 $('#select2').cascade('#select1', {
   ajax: {
    url: "load.jsp",
         type: "POST",
       data: { click: '1', val: $('#select1').val() },
       dataType: "json"
   },
   template: function(item) { return "" + item.Text + ""; },
   match: function(selectedValue) { return this.When == selectedValue; }
   });
    
 // select2對應select3
 $('#select3').cascade('#select2', {
   ajax: {
    url: "load.jsp",
         type: "POST",
       data: { click: '2', val: $('#select2').val() },
       dataType: "json"
   },
   template: function(item) { return "" + item.Text + ""; },
   match: function(selectedValue) { return this.When == selectedValue; }
   });    
});

Load.jsp

<%@page contentType="text/html" pageEncoding="UTF-8" language="java"%>
<%
 String click = request.getParameter("click");
 String value = request.getParameter("value");

 String result = "[";
 if("1".equals(click)){
  result += "{'When':'PC','Value':'PC1','Text':'平板電腦'},";
  result += "{'When':'PC','Value':'PC2','Text':'桌上型電腦'},";
  result += "{'When':'PC','Value':'PC3','Text':'電腦週邊'},";
  result += "{'When':'BK','Value':'BK1','Text':'程式書籍'},";
  result += "{'When':'BK','Value':'BK2','Text':'漫畫'},";
  result += "{'When':'GE','Value':'GE1','Text':'主機'},";
  result += "{'When':'GE','Value':'GE2','Text':'遊戲片'},";
 }
 else if("2".equals(click)){
  result += "{'When':'PC1','Value':'PC1_1','Text':'APPLE'},";
  result += "{'When':'PC1','Value':'PC1_2','Text':'ACER'},";
  result += "{'When':'PC2','Value':'PC2_1','Text':'ASUS'},";
  result += "{'When':'PC2','Value':'PC2_2','Text':'HP'},";
  result += "{'When':'BK1','Value':'BK1_1','Text':'JAVA'},";
  result += "{'When':'BK1','Value':'BK1_2','Text':'C++'},";
  result += "{'When':'BK2','Value':'BK2_1','Text':'美國漫畫'},";
  result += "{'When':'BK2','Value':'BK2_2','Text':'日本漫畫'},";
  result += "{'When':'GE1','Value':'GE1_1','Text':'PS3'},";
  result += "{'When':'GE1','Value':'GE1_2','Text':'XBOX'},";
  result += "{'When':'GE1','Value':'GE1_3','Text':'Will'},";
 }
 result += "]";
 System.err.println(result);
 out.print(result);
%>

結果