Java の州と都市のカスケードドロップダウンメニューのコード例-＆＃＆チュートリアル-php.cn

Java の州と都市のカスケードドロップダウンメニューのコード例

高洛峰

リリース： 2017-01-17 11:28:42

オリジナル

1808 人が閲覧しました

この記事の例では、参考のために Java 州と都市のカスケードの特定のコードを共有します。具体的な内容は次のとおりです

1.LoadAreaServlet.java

package com.scce.servlet;
  
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
  
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
  
import net.sf.json.JSONArray;
  
import com.scce.pojo.City;
import com.scce.pojo.Prov;
  
public class LoadAreaServlet extends HttpServlet {
  
    
    
  private static final long serialVersionUID = 1L;
  
  public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
      this.doPost(request, response);
  }
  
    
  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    response.setContentType("text/html;charset=utf-8");
    request.setCharacterEncoding("utf-8");
    PrintWriter out = response.getWriter();
    ArrayList<Prov> provs = new ArrayList<Prov>();
    String provinceID = request.getParameter("provinceID");
    if (provinceID=="" || provinceID==null) {
      System.out.println("加载地级市信息");
    Prov pro1 = new Prov();
    pro1.setId(0);
    pro1.setProvinceName("湖北");
    Prov pro2 = new Prov();
    pro2.setId(1);
    pro2.setProvinceName("湖南");
    Prov pro3 = new Prov();
    pro3.setId(2);
    pro3.setProvinceName("广东");
    Prov pro4 = new Prov();
    pro4.setId(3);
    pro4.setProvinceName("广西");
    provs.add(pro1);
    provs.add(pro2);
    provs.add(pro3);
    provs.add(pro4);
    System.out.println(JSONArray.fromObject(provs).toString()); //[{"id":0,"provinceName":"湖北"},{}]
    out.print(JSONArray.fromObject(provs).toString());
    }else{
      ArrayList<City> citys = new ArrayList<City>();
      if (provinceID.equals("0")) {
        City city1 = new City();
        city1.setId(0);
        city1.setCityName("武汉市");
        City city2 = new City();
        city2.setId(1);
        city2.setCityName("黄石市");
        City city3 = new City();
        city3.setId(2);
        city3.setCityName("十堰市");
        citys.add(city1);
        citys.add(city2);
        citys.add(city3);
      }
      if (provinceID.equals("1")) {
        City city1 = new City();
        city1.setId(0);
        city1.setCityName("长沙市");
        City city2 = new City();
        city2.setId(1);
        city2.setCityName("岳阳市");
        City city3 = new City();
        city3.setId(2);
        city3.setCityName("湘潭市");
        citys.add(city1);
        citys.add(city2);
        citys.add(city3);
      }
      System.out.println(JSONArray.fromObject(citys).toString());
      out.print(JSONArray.fromObject(citys).toString());
    }  
  }
    
  
}

ログイン後にコピー

2.test1.html

<!DOCTYPE html>
<html>
 <head>
  <title>chapter4-test1</title>
    
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
   
  
 <link rel="stylesheet" href="../UI/themes/icon.css" type="text/css"></link>
   
 <link rel="stylesheet" href="../UI/themes/default/easyui.css" type="text/css"></link>
   
 <!-- <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> -->
 <script type="text/javascript" src="../UI/jquery.min.js"></script>
 <script type="text/javascript" src="../UI/jquery.easyui.min.js"></script>
   
 <script type="text/javascript" src="../UI/locale/easyui-lang-zh_CN.js"></script>
 <script type="text/javascript">
 //LoadAreaServlet
  /* var dataCombobox=[{"id":1,"provinceName":"湖北省"}, 
    {"id":2,"provinceName":"湖南省","selected":true},
    {"id":3,"provinceName":"河北省"},
    {"id":4,"provinceName":"河南省"}
  ]; */
 $(function () {
       $("#province").combobox({
         width: 150,
         valueField: &#39;id&#39;, //1
         textField: &#39;provinceName&#39;, // 湖北省              
         editable: false,
        // data:dataCombobox //指定下拉列表的数据源
        url:&#39;../LoadAreaServlet&#39;,
        method:&#39;post&#39;,
        onLoadSuccess:function(data){
            
          var provId = $("#province").combobox("getValue");
            
          loadCity(provId);
        },
        onSelect:function(recode){
          loadCity(recode.id);
        }
          
       });
     });
  
     function loadCity(provId){
       $("#city").combobox({
         width: 150,
         valueField: &#39;id&#39;, //1
         textField: &#39;cityName&#39;, // 湖北省              
         editable: false,
        // data:dataCombobox //指定下拉列表的数据源
        url:&#39;../LoadAreaServlet?provinceID=&#39;+provId,
        method:&#39;post&#39;
       });
     }
   
 </script>
 </head>
   
 <body> 
  省：
  <select id="province" >
     <option value="0">数据加载中..</option>
         
  </select>
  <br/>
    
  市：
  <select id="city" >
     <option value="">数据加载中..</option>
  </select>
   
   
 </body>
</html>

ログイン後にコピー

上記が全体の内容です。この記事が Java プログラミングを学ぶ皆さんのお役に立てば幸いです。

Java の州および地方自治体のカスケードドロップダウンメニューのサンプルコードに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。