從資料庫查詢數據進行聯動（類似城市聯動）

来源:https://www.cnblogs.com/wsmpy3/archive/2018/09/17/9660357.html
-Advertisement-
Play Games

資料庫自己定義，我用了四個框聯動，選擇了一個才會出現下一個，每一個都會去資料庫查詢一次。但是一開始第一次的方法是查詢一次，然後每次聯動都用的最開始一次的數據查詢，後來發現查詢一次不能讓聯動點來點去，只能一次順序過去，所以才每次都查詢。 第一次： 前端: js: 資料庫： 第二次： ...


資料庫自己定義，我用了四個框聯動，選擇了一個才會出現下一個，每一個都會去資料庫查詢一次。但是一開始第一次的方法是查詢一次，然後每次聯動都用的最開始一次的數據查詢，後來發現查詢一次不能讓聯動點來點去，只能一次順序過去，所以才每次都查詢。

第一次：

前端:

<select id="first" class="select"onchange="firstSel()"></select>
<select class="select" id="second"></select>                
<select class="select"id="third"></select>
<select class="select"id="fourth"></select>

js:

function firstSel(){//如果第一個下拉列表的值改變則調用此方法
        var province = $("#first").val();//得到第一個下拉列表的值
        $("#second").hide(); //初始化的時候第二個下拉列表隱藏
        $("#third").hide();
        $("#fourth").hide();
        url = "ShopGet";
        param = "{\"province\":\"" + province+ "\"}";    
        jsonObj = JSON.parse(param);
        if(province!=null && "" != province&& 1 != province){
            //傳遞數據
            $.post(url,jsonObj,function(data){        
                    var res = JSON.parse(data);
                    var newcity = [];
                    var newarea= [];
                    var newshop= [];
                    var option="<option value='0'>"+"-城市-"+"</option>";        
                    $.each(res,function(i,n){//迴圈，i為下標從0開始，n為集合中對應的第i個對象
                        if(newcity.indexOf(n.city) == -1) {　//去掉重覆值　　　
                            newcity.push(n.city);
                            option += "<option value='"+n.city+"'>"+n.city+"</option>"　　
                        }
                    });
                    $("#second").html(option);//將迴圈拼接的字元串插入第二個下拉列表
                    $("#second").show();//把第二個下拉列表展示
                    $("#second").change(function () {//選擇第二個框時
                    $("#third").hide();
                    $("#fourth").hide();//從前面重新選擇時後面的選框要消失
                    var city = $("#second").val();
                    var option1="<option value='0'>"+"-市區-"+"</option>";
                    /////
                    for(i in newcity){//在城市數組中迴圈找到我選擇的城市
                        if(city==newcity[i]){//如果找到了就開始下一步
                           $.each(res,function(i,n){//迴圈全部的資料庫數據
                               if(n.city==city) {　//如果資料庫中某個城市是我選擇的就添加地區到地區數組
                                   if(newarea.indexOf(n.area) == -1){　　
                                     newarea.push(n.area);
                                    option1 += "<option value='"+n.area+"'>"+n.area+"</option>"　　
                                }}});
                        }}
              
                    $("#third").html(option1);//將迴圈拼接的字元串插入第二個下拉列表
                    $("#third").show();//把第二個下拉列表展示
                    $("#third").change(function () {
                        var area = $("#third").val();
                        var option2="<option value='0'>"+"-站點-"+"</option>";
                        for(i in newarea){
                            if(area==newarea[i]){
                                 $.each(res,function(i,n){
                                     if(n.area==area){
                                         if(newshop.indexOf(n.shop) == -1){　　
                                             newshop.push(n.shop);
                                           option2 += "<option value='"+n.shop+"'>"+n.shop+"</option>"　 
                            } } }); } } 
                    $("#fourth").html(option2);//將迴圈拼接的字元串插入第四個下拉列表
                    $("#fourth").show();//把第四個下拉列表展示
                    $("#fourth").change(function () {
                        var shop=$("#fourth").val();
                        alert(shop);
                    });                
                });
            });
            });
        }else {
            $("#second").hide();
        }}

資料庫：

public ArrayList<Shop> ShopSelectD(Shop shop) throws SQLException {
        String sql = "select * from shop where 1=1 and province=?";
        pst = conn.prepareStatement(sql);
        pst.setString(1,shop.getProvince());
        conn.commit();
        ResultSet rs = pst.executeQuery();
        ArrayList<Shop> ShopList = new ArrayList<Shop>();
        if(rs.next()){
          for(int i=0;i<=rs.getRow();i++){
              Shop shopTmp = new Shop();
              shopTmp.setId(rs.getInt("id"));
              shopTmp.setProvince(rs.getString("province"));
              shopTmp.setCity(rs.getString("city"));
              shopTmp.setArea(rs.getString("area"));
              shopTmp.setShop(rs.getString("shop"));
              ShopList.add(shopTmp);
            rs.next(); 
          }
        }
        return ShopList;
      }

第二次：

<select class="select"id="first2"name="first2" onchange="change(this)"></select>
                  <select class="select"id="second2"name="second2"onchange="change(this)"></select>
                  <select class="select"id="third2"name="third2"onchange="change(this)"></select>
                  <select class="select"id="fourth2"name="fourth2"onchange="change(this)"></select>
function change(which){
    var type=null;
    var i=0;
    if(which.id=='first2'){
        $("#second2")[0].style.opacity = "0";
        $("#third2")[0].style.opacity = "0";
        $("#fourth2")[0].style.opacity = "0";
        var da =$('[name="first2"] option:selected').val();
        type="省會";
        id=2;
    }
    if(which.id=='second2'){
        $("#third2")[0].style.opacity = "0";
        $("#fourth2")[0].style.opacity = "0";
        var da =  $("#second2").val();
        type="城市";
        id=3;
    }
    if(which.id=='third2'){
        var da =  $("#third2").val();
        type="市區";
        id=4;
    }
    url = "ShopAllGet";
    param = "{\"date\":\"" +da+ "\",\"type\":\""+type+"\"}";    
    jsonObj = JSON.parse(param);
    $.post(url,jsonObj,function(data){
        var res = JSON.parse(data);switch(id){
        case 2:        
            option = "<option value='1'>"+"-城市-"+"</option>"
            $.each(res,function(i,n){//迴圈，i為下標從0開始，n為集合中對應的第i個對象           
                    option += "<option value='"+n.city+"'>"+n.city+"</option>"　　        
            });
            $("#second2").html(option);//將迴圈拼接的字元串插入第二個下拉列表
            $("#second2")[0].style.opacity = "1"//把第二個下拉列表展示
            break;
        case 3:
            option = "<option value='1'>"+"-市區-"+"</option>"
            $.each(res,function(i,n){//迴圈，i為下標從0開始，n為集合中對應的第i個對象     
                    option += "<option value='"+n.area+"'>"+n.area+"</option>"　　
              
            });
            $("#third2").html(option);
            $("#third2")[0].style.opacity = "1"
            break;
        case 4:
            option="<option value='0'>"+"-站點-"+"</option>";
            $.each(res,function(i,n){
                    option+= "<option value='"+n.shop+"'>"+n.shop+"</option>"　 
                }); 
            $("#fourth2").html(option);
            $("#fourth2")[0].style.opacity = "1"
            break;
        default:
            break;
        }    
    });
}
if("省會".equals(type)){
                shop.setProvince(date);
                 System.out.print("action");
                 ArrayList<Shop> ShopList = shopSi.ShopFindS(shop);
                    if(ShopList.isEmpty()){        
                        out.print("查詢錯誤");//傳值，否則查不到數據會報錯
                        }        
                    else{                       
                        JSONArray ShopListMsg = JSONArray.fromObject(ShopList);
                        out.print(ShopListMsg);
                        System.out.print(ShopListMsg);                                             
                }}
            else if("城市".equals(type)){
                shop.setCity(date);
                 ArrayList<Shop> ShopList2 = shopSi.CityFindS(shop);
                    if(ShopList2.isEmpty()){        
                        out.print("查詢錯誤");//傳值，否則查不到數據會報錯
                        }        
                    else{                       
                        JSONArray ShopListMsg = JSONArray.fromObject(ShopList2);
                        out.print(ShopListMsg);
                        System.out.print(ShopListMsg);    
                    }
            }else if("市區".equals(type)){
                shop.setArea(date);
                 ArrayList<Shop> ShopList3 = shopSi.AreaFindS(shop);
                    if(ShopList3.isEmpty()){        
                        out.print("查詢錯誤");//傳值，否則查不到數據會報錯
                        }        
                    else{                       
                        JSONArray ShopListMsg = JSONArray.fromObject(ShopList3);
                        out.print(ShopListMsg);
                        System.out.print(ShopListMsg);    
                    }
            }//多的話可以繼續聯動

 

public ArrayList<Shop> ProvinceSelectD(Shop shop) throws SQLException{
    String sql = "select distinct province from shop;";//用了 distinct去重覆，所以js可以不用數組來去重
    pst = conn.prepareStatement(sql);
    conn.commit();
    ResultSet rs = pst.executeQuery();
    ArrayList<Shop> ShopList = new ArrayList<Shop>();
    if(rs.next()){
      for(int i=0;i<=rs.getRow();i++){
          Shop shopTmp = new Shop();
          shopTmp.setProvince(rs.getString("province"));
          ShopList.add(shopTmp);
        rs.next(); 
      }
    }
    return ShopList;
    }

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CentOS7下安裝MySQL5.7
    買了一個阿裡的伺服器，安裝的系統是CentOS7,在上面搭建一個資料庫系統，盡然花了一個早上的時間，記錄下最終的解決方案。 MYSQL5.7的安裝： 1.首先檢查伺服器上是否已經安裝了MYSQL的數據了。 如果已經安裝過mysql數據的話，需要卸載以前舊版的數據，否則容易引起衝突，導致後安裝失敗或者 ...
  • 大數據學習之路（跟著大神學習一波）
    前言： 一、背景介紹 二、大數據介紹 正文： 一、大數據相關的工作介紹 二、大數據工程師的技能要求 三、大數據學習規劃 四、持續學習資源推薦（書籍，博客，網站） 五、項目案例分析（批處理+實時處理） 大數據學習群：119599574 前言 一、背景介紹 本人目前是一名大數據工程師，項目數據50T，日 ...
  • MySQL視圖
    1. 創建視圖 1.1 創建視圖的語法形式 1.2 在單表上創建視圖 例1：在t表格上創建一個名為view_t的視圖： 預設情況下創建的視圖和基本表的欄位是一樣的，也可以通過指定視圖欄位的名稱還創建視圖。 例2：在t表格上創建一個名為view_t2的視圖： qty 1.3 在多表上創建視圖 MySQ ...
  • 微信小程式-06-詳解介紹.js 邏輯層文件-註冊頁面
    上一篇介紹的是 app.js 邏輯層文件中註冊程式，對應的每個分頁面都會有的 js 文件中 page() 函數註冊頁面 微信小程式 06 詳解介紹.js 邏輯層文件 註冊頁面 寶典官方文檔： https://developers.weixin.qq.com/miniprogram/dev/frame ...
  • Login case
    第一步：畫UI，代碼如下： ...
  • logcat use
    將已經存在的工程導入到eclipse步驟： ①：首先複製當前工程所在的路徑。 ②：然後在eclipse，右鍵->Import->General->Existing Projects into Workspace->將複製的路徑黏貼進去->Browser->Copy projects into wor ...
  • Related concepts of testing
    根據是否知道源代碼測試可以分為黑盒和白盒。 黑盒：功能測試。 白盒：知道源代碼，要寫測試代碼。 根據測試的粒度。 方法測試： 單元測試： 集成測試： 系統測試： 根據測試的暴力程度。 壓力測試：谷歌工程師給我們提供了一個monkey + 次數指令可以進行壓力測試。 冒煙測試： 在Android工程下 ...
  • html的背景樣式圖片
    背景圖片 如果背景圖片小於當前的div的情況下預設的是將平鋪充滿元素background-image 設置背景圖片。background-repeat 設置是否及如何重覆背景圖片。 repeat 預設的是都重覆 repeat-x 背景圖像在水平方向重覆 repeat-y 背景圖片在垂直方向重覆 no ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類