联动下拉菜单代码(jQuery与JSON实现)

发布时间:2020-11-23编辑:脚本学堂
分享一个联动下拉菜单代码,jquery与json结合实现的级联下拉菜单,有需要的朋友参考下。

例子,jquery与json实现的联动下拉菜单 (级联下拉菜单)。
 

复制代码 代码示例:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>My JSP 'index.jsp' starting page</title> 
    <meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="cache-control" content="no-cache"> 
    <meta http-equiv="expires" content="0">     
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
    <meta http-equiv="description" content="This is my page"> 
    <script type="text/javascript" src="include/js/jquery.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
        $("#city").change(function(){ 
            $.getJSON("option",{index:$(this).val()},function(myJSON){ 
                var myOptions=""; 
                for(var i=0;i<myJSON.length;i++){ 
                    myOptions += '<option value="' + myJSON[i].optionValue + '">' + myJSON[i].optionDisplay +  
                    '</option>'; 
                } 
                $("#area").empty(); 
                $("#area").html(myOptions); 
            }); 
        }); 
        $("#city").change(); 
    }) 
    </script> 
  </head> 
  <body> 
    This is my JSP page. <br> 
    <select id="city">  
        <option value="1">北京</option> 
        <option value="2">上海</option> 
        <option value="3">天津</option> 
    </select> 
    <select id="area"> 
    </select> 
  </body> 
</html> 

2,jsp代码部分
 

复制代码 代码示例:
package cn.hlinuxjishu/13830.html target=_blank class=infotextkey>awk.ajax; 
import java.io.IOException; 
import java.io.PrintWriter; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
public class Option extends HttpServlet { 
 
    public void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        response.setContentType("text/xml"); 
        response.setHeader("Cache-Control", "no-cache"); 
        response.setContentType("text/html; charset=utf-8");  
        String JSON_text = ""; 
        String city = (String) request.getParameter("index"); 
        System.out.println("城市号:"+city); 
        if(city.equals("1")){ 
            JSON_text = "[{optionValue:'011',optionDisplay:'海淀区'},{optionValue:'012',optionDisplay:'东城区'},{optionValue:'013',optionDisplay:'西城区'}]"; 
        }else if(city.equals("2")){ 
            JSON_text = "[{optionValue:'21',optionDisplay:'闵行区'},{optionValue:'22',optionDisplay:'宝山区'},{optionValue:'23',optionDisplay:'浦东区'}]"; 
        }else if(city.equals("3")){ 
            JSON_text = "[{optionValue:'31',optionDisplay:'和平区'},{optionValue:'32',optionDisplay:'南开区'},{optionValue:'33',optionDisplay:'塘沽区'}]"; 
        } 
         
        PrintWriter out = null; 
        try{ 
            out = response.getWriter(); 
        } catch (IOException ex) { 
            ex.printStackTrace(); 
        } 
        out.write(JSON_text); 
        out.close(); 
    } 
 
    public void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
 
        doGet(request, response); 
    } 
 

3,xml文件
 

复制代码 代码示例:
<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="2.5"  
    xmlns="http://java.sun.com/xml/ns/javaee"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 
  <servlet> 
    <servlet-name>Option</servlet-name> 
    <servlet-class>cn.hawk.ajax.Option</servlet-class> 
  </servlet> 
 
  <servlet-mapping>  
    <servlet-name>Option</servlet-name> 
    <url-pattern>/option</url-pattern> 
  </servlet-mapping> 
  <welcome-file-list> 
    <welcome-file>index.jsp</welcome-file> 
  </welcome-file-list> 
</web-app>