下拉框聯動

時間 2019-11-24

標籤下拉聯動简体版

原文原文鏈接

項目終於作完了。今天抽點時間對項目中遇到的問題進行下總結，個人模塊中在頁面要實現一個下拉框聯動的功能。例如：你選「中國」時，聯動的下拉框顯示「北京，上海」；你選美國時，聯動的下拉框顯示「紐約，華盛頓」。實現這個功能，我採用的是AJAX的一個框架DWR.它是經過動態把java類生成javascript。感受好像是在客戶端調用同樣。要使用DWR還須要一些準備工做。1.從網上下載dwr.jar放在項目的lib目錄下。注意，還須要commons-logging.jar包，不然會報錯說是日誌包找不到。3，須要在web.xml中添加javascript

<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>html

另外還須要dwr.xml的文件java

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr//dwr20.dtd"><dwr>
<allow>
  <create javascript="test" creator="new" scope="request">
   <param name="class" value="com.huan.tv.web.JiLian"></param>
  </create>
</allow>
</dwr>web

具體的參數意思，等我把項目跑起來在說啊，呵呵。到目前爲止準備工做已告一段落，如今我就對實現聯動功能作具體是代碼實現。我寫了一個JiLian.java來實現具體功能。數據庫

package com.huan.tv.web;網絡

import java.util.TreeMap;
import java.util.Map;app

/**
* 本類是用DWR實現的一個聯動類
* @author guohusong
*
*/
public class JiLian {
static Map countryMap = null;//countryMap封裝了獲取的國家列表
static Map cityMap = null;//cityMap封裝了獲取的國家下的城市列表
/**
* 此方法在頁面加載時候，把國家數據加載到選擇國家的下拉框
* 在實際開發中這些數據都是從數據庫的靜態表裏讀出來的，如今
* 爲了省時間，因此就把數據給寫死了。
* @return map
*/
public static Map getCountryList(){
  countryMap = new TreeMap();
  countryMap.put("0", "--請選擇--");
  countryMap.put("1", "中國");
  countryMap.put("2", "美國");
  return countryMap;
}框架

/**
* 此方法是根據選擇的國家ID號來聯動國家包括的城市列表
* @param countryKey
* @return Map
*/
public static Map getCityList(String countryKey){

  cityMap = new TreeMap();
  if("1".equals(countryKey.trim())){//若是選擇的是中國

   cityMap.put("0", "--請選擇--");
   cityMap.put("3", "北京");
   cityMap.put("4", "上海");
  }
  if("2".equals(countryKey.trim())){//若是選擇的是美國

   cityMap.put("0", "--請選擇--");
   cityMap.put("5", "紐約");
   cityMap.put("6", "華盛頓");
  }else{

   cityMap.put("0", "--請選擇--");
  }
  return cityMap;
}
}
異步

能夠看出JiLian.java就是一個普通的java類。那麼DWR框架怎麼識別它了？這就須要在dwr.xml中給她指定 <param name="class" value="com.huan.tv.web.JiLian"></param>
如今咱們就能夠對咱們寫的dwr進行測試了。在地址欄輸http://localhost:8080/LianDong/dwr/ (LianDong是個人項目名)你會發現會出現jsp

Classes known to DWR:

test (com.huan.tv.web.JiLian)

test是我在dwr.xml中配置的javascript的值是用來與javascript交互的名稱.點擊進入你會發現裏面有JiLian.java裏的getCountryList()和getCityList(String countryKey)方法。如今就能夠對聯動的方法進行測試了，點擊getCountryList()javascript就會把方法裏面的值取出來。點擊getCityList(「」)在「」裏輸入1，javascript就會把中國裏的城市列出來。輸入2，會把美國的城市顯示出來。

方法測試經過後，下面就要在頁面中調用JiLian.java裏的方法。index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.huan.tv.web.JiLian" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>下拉框聯動實例</title>

<script type='text/javascript' src='/LianDong/dwr/interface/test.js'></script>
<script type='text/javascript' src='/LianDong/dwr/engine.js'></script>
<script type='text/javascript' src='/LianDong/dwr/util.js'></script>
</head>
   <script type="text/javascript">
   function init(){//頁面打開時加載國家列表
    test.getCountryList(callback);
   }

//Java從根本上講是同步機制，然而AJAX倒是異步的。因此你調用遠程方法時，當數據已經從網絡上返回的時候，你要提供有反調（callback）功能的DWR function callback(data) { //將從後臺獲取的國家列表添加到下拉框 DWRUtil.removeAllOptions("country"); DWRUtil.addOptions("country", data); changeCity(); } function changeCity()//聯動城市下拉框 { test.getCityList(DWRUtil.getValue("country"),cityback) } function cityback(data) { DWRUtil.removeAllOptions("city"); DWRUtil.addOptions("city", data); } </script> <body onload="init()"> <form name="form1" method="post"> <select id="country" onchange="changeCity()"> </select> <select id="city"> </select> </form> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。