Mybatis + js 實現下拉列表二級聯動效果
阿新 • • 發佈：2021-06-16
一、業務需求
實現省份與城市的二級聯動
二、實現效果
三、程式碼實現
1. province_city.jsp
前端介面實現
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>二級聯動</title> <script src="/static/jquery-1.11/jquery-1.11.3.min.js"></script> <script> // 頁面載入完畢執行 $(function () { let $p = $('#p'); let $c = $('#c'); // 給省份下拉框繫結值改變事件處理函式，當省份下拉程式設計客棧框選項改變了，就傳送請求獲取這個省份對應 // 城市資料，拿到資料再使用 DOM 顯示在城市下拉框中 $p.change(function () { // 獲取被選中省份下拉框的 option 的 value 屬性值，即省份 id 值 let pid = $(this).val(); // 清除舊有子元素（每次改變省份需要清除城市元素，否則城市元素會一直新增） $c.empty(); // 請選擇也被清除了，所以需要添加回來 $c.append('<option value="-1">請選擇</option>'); // 判斷是否選中了省份 if (pid >= 1) { $.post('/cities','pid=' + pid,function (data) { // 遍歷城市陣列 data.forEach(function (value) { console.log(value); // 新增下拉元素 $c.append('<option value="' + value.id +'">' + value.name +'</option>'); }); }); } }); }); </script> </head> <body> 省份:<select id="p"> <option value="-1">請選擇</option> <!-- 遍歷後臺傳過來的省份集合 --> <c:forEach items="${allProvince}" var="province"> <option value="${province.id}">${province.name}</option> </c:forEach> </select> 城市:<select id="c"> <o程式設計客棧ption value="-1">請選擇</option> </select> </body> </html>
2. TwoController
後臺處理方法
package com.yy.homework.web.controller;
import com.yy.homework.domain.City;
import com.yy.homework.domain.Province;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
public class TwoController {
// 獲取省份 JSON 資料
@RequestMapping("/provinces")
public String getProvinces(Model model) {
List<Province> allProvince = Province.getAllProvince();
model.addAttribute("allProvince",allProvince);
return "forward:/province_city.jsp";
}
// 獲取對應省份的城市 JSON 資料
@RequestMapping("/cities")
@ResponseBody
public List<City> getCitihttp://www.cppcns.com
2. Province
為了讓程式碼少一點，看的更清晰些，我偽造了一些省份資料，真實資料應該是你自己從資料庫中查詢出來的，封裝成集合的形式給 Controller 呼叫
package com.yy.homework.domain;
import java.util.ArrayList;
import java.util.List;
public class Province {
private Long id;
private String name;
public Province() {
}
public Province(Long id,String name) {
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public String getName() {
return name;
}
// 獲取所有的省份
public static List<Province> getAllProvince() {
List<Province> provinces = new ArrayList<Prohttp://www.cppcns.comvince>();
provinces.add(new Province(1L,"湖南"));
provinces.add(new Province(2L,"廣東"));
provinces.add(new Province(3L,"湖北"));
return provinces;
}
}
3. Province
這裡是我偽造的一些城市資料，真實資料應該是你自己根據前臺頁面傳過來的 省份 id 從資料庫中查詢出來的，封裝成集合的形式給 Controller 呼叫，返回前端介面
package com.yy.homework.domain;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* @program: jQuery-test02
* @ClassName City
* @description:
* @author: YanYang
* @create: 2021-05-28 18:07
**/
public class City {
private Long id;
private String name;
public City() {
}
public City(Long id,String name) {
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public String getName() {
return name;
}
public String toString() {
return "City [id=" + id + ",name=" + name + "]";
}
/**
* 根據省份 id 查詢省份中的城市!
* @return
*/
public static List<City> getCityByProvinceId(Long pid) {
程式設計客棧 List<City> citys = new ArrayList<City>();
if (pid == 1) {
citys = Arrays.asList(
new City(11L,"長沙市"),new City(12L,"株洲市"),new City(13L,"湘潭市"),new City(14L,"衡陽市"),new City(15L,"邵陽市"),new City(16L,"岳陽市"),new City(17L,"常德市"),new City(18L,"張家界市")
);
} else if (pid == 2) {
citys = Arrays.asList(
new City(21L,"廣州市"),new City(22L,"深圳市"),new City(23L,"佛山市"),new City(24L,"中山市"),new City(25L,"珠海市"),new City(26L,"汕頭市"),new City(27L,"潮州市"),new City(28L,"東莞市")
);
} else if (pid == 3) {
citys = Arrays.asList(
new City(31L,"孝感市"),new City(32L,"黃岡市"),new City(33L,"咸寧市"),new City(34L,"恩施州"),new City(35L,"鄂州市"),new City(36L,"武漢市"),new City(37L,"荊門市"),new City(38L,"襄陽市")
);
}
return citys;
}
}
總結：
以上就是用二級聯動的程式碼了，程式碼僅供參考，歡迎討論交流。
以上就是Mybatis + js 實現下拉列表二級聯動的詳細內容，更多關於Mybatis下拉列表二級聯動的資料請關注我們其它相關文章！