两种方法实现下拉框及级联效果

最新推荐文章于 2024-07-12 09:20:01 发布

haveFuner

最新推荐文章于 2024-07-12 09:20:01 发布

阅读量8.6k

点赞数 3

本文链接：https://blog.csdn.net/qq_31118837/article/details/80976242

版权

第一种：普通方法

比如说var message为后台传递到前端的一个数组（一般来说，后台传递到前端的是JSON类型的数据，此数据包含很多其他的成分，我们可以通过console.log()方法打印出该数据包含的具体成分，在从中拿到自己需要的数据）

//首先，我们需要遍历该数组（message为该数组，）

$.each(message,function(index.item){

//获取到了数组中的每个元素

var eachItem = item

//将获取到的每个数据拼接到id为selectItem的<select>元素中

$("#selectItem").append("<option id='bdate'>"+eachItem+"</option>");

}

//在<body>中定义一个下拉框

</select>

这样我们就可以生成一个下拉框了

那么如何产生级联的效果呢？我们那最经典的省市区做三级级联进行演示

jsp:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%--

  Created by IntelliJ IDEA.

  User: DELL

  Date: 2018/7/16

  Time: 10:22

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="jquery-easyui-1.4a/jquery.min.js"></script>

<script type="text/javascript" src="jquery-easyui-1.4a/jquery.easyui.min.js"></script>

<script type="text/javascript" src="script/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4a/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="style/style.css"/>

<script type="text/javascript" src="page/comm.js"></script>

<html>

<head>

    <title>Title</title>

    <script>

        function changeToCity() {

            $("#sec1 option:gt(0)").remove();
            $("#sec2 option:gt(0)").remove();

            var select = document.getElementById("sec");

            var value = select.value;

            obj = {

                "proId": value

            };

            var data = getData("pca_findCitiesByProvinceId", obj);


            $.each(data.pca2List, function (index, item) {

                var city = item.cityName;

                var cityId = item.cityID;


                $("#sec1").append("<option value='" + cityId + "'>" + city + "</option>")

            })


        }


        function changeToArea() {

            $("#sec2 option:gt(0)").remove();

            var select = document.getElementById("sec1");

            var value = select.value;
            obj = {

                "cityId": value

            };

            var data = getData("pca_findAreasByCityId", obj);
            console.log(data);

            $.each(data.pca3List, function (index, item) {

                var disName = item.disName;

                $("#sec2").append("<option>" + disName + "</option>")

            })


        }

    </script>

</head>

<body>

省：<select onchange="changeToCity()" id="sec">

    <option>请选择</option>

    <c:forEach items="${pca1List}" var="obj" varStatus="index">

        <option name="pro" id="pro" value="${obj.proID}">${obj.proName}</option>

    </c:forEach>

</select><br/>

市：<select onchange="changeToArea()" id="sec1">

    <option>请选择</option>

</select><br/>

区：<select id="sec2">

    <option>请选择</option>

</select>

</body>

</html>

action：

package com.ictehi.action.intelligent;

import com.ictehi.action.comm.BaseAction;
import com.ictehi.model.weather.pca1;
import com.ictehi.model.weather.pca2;
import com.ictehi.model.weather.pca3;
import com.ictehi.service.intelligent.pcaService;
import org.springframework.stereotype.Controller;

import javax.annotation.Resource;
import java.util.List;


@Controller("pcaAction")
public class pcaAction extends BaseAction {
    @Resource
    pcaService pcaservice;

    List<pca1> pca1List;
    List<pca2> pca2List;
    List<pca3> pca3List;
    Integer proId;
    Integer cityId;

    public String findProvinces() {
        pca1List = pcaservice.findProvinces();
        return "list";
    }

    public String findCitiesByProvinceId(){
        pca2List = pcaservice.findCitiesByProvinceId(proId);
        return "success";
    }

    public String findAreasByCityId(){
        pca3List = pcaservice.findareasByProvinceId(cityId);
        return "success";
    }

    public List<pca1> getPca1List() {
        return pca1List;
    }

    public void setPca1List(List<pca1> pca1List) {
        this.pca1List = pca1List;
    }

    public List<pca2> getPca2List() {
        return pca2List;
    }

    public void setPca2List(List<pca2> pca2List) {
        this.pca2List = pca2List;
    }

    public Integer getProId() {
        return proId;
    }

    public void setProId(Integer proId) {
        this.proId = proId;
    }

    public List<pca3> getPca3List() {
        return pca3List;
    }

    public void setPca3List(List<pca3> pca3List) {
        this.pca3List = pca3List;
    }

    public Integer getCityId() {
        return cityId;
    }

    public void setCityId(Integer cityId) {
        this.cityId = cityId;
    }
}

service:

package com.ictehi.service.intelligent;

import com.ictehi.model.weather.pca1;
import com.ictehi.model.weather.pca2;
import com.ictehi.model.weather.pca3;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service("pacservice")
public class pcaService {
    @Resource
    JdbcTemplate sqljdbcTemplate;

    public List<pca1> findProvinces(){
        String sql = "select ProName,proID from T_Province";
        List<pca1> list = sqljdbcTemplate.query(sql, new BeanPropertyRowMapper(pca1.class));
        return list;
    }

    public List<pca2> findCitiesByProvinceId(Integer proID){
        String sql = "select cityName,cityId from T_City c \n" +
                "left join T_Province p on c.ProID = p.ProID\n" +
                "where p.ProID = " + proID;
        List<pca2> list = sqljdbcTemplate.query(sql, new BeanPropertyRowMapper(pca2.class));
        return list;
    }

    public List<pca3> findareasByProvinceId(Integer cityID){
        String sql = "select DisName from T_District d \n" +
                "left join T_City c on c.CityID = d.CityID\n" +
                "where c.CityID = "+cityID;
        List<pca3> list = sqljdbcTemplate.query(sql, new BeanPropertyRowMapper(pca3.class));
        return list;
    }

}

第二种easyui:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2018/7/16
  Time: 10:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4a/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4a/jquery.easyui.min.js"></script>
<script type="text/javascript" src="script/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4a/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<script type="text/javascript" src="page/comm.js"></script>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var data = ${listArray};
            $("#pro").combobox({
                data: data,
                valueField: "proID",//value值
                textField: "proName",//文本值
                panelHeight: "auto",
                onHidePanel: function () {
                    $("#city").combobox("setValue", "请选择");
                    $("#area").combobox("setValue", "请选择");
                    var proId = $('#pro').combobox('getValue');
                    var data1 = getData("pca_findCitiesByProvinceId?proId=" + proId);
                    console.log(data1);
                    $("#city").combobox("loadData", data1.pca2List);
                }
            });
            $('#city').combobox({
                editable: false, //不可编辑状态
                cache: false,
                panelHeight: '150',//自动高度适合
                valueField: 'cityID',
                textField: 'cityName',
                onHidePanel: function () {
                    var cityId = $('#city').combobox('getValue');
                    var data2 = getData("pca_findAreasByCityId?cityId=" + cityId);
                    console.log(data2);
                    $("#area").combobox("loadData", data2.pca3List);
                }
            });
            $('#area').combobox({
                editable: false, //不可编辑状态
                cache: false,
                panelHeight: '150',//自动高度适合
                valueField: 'disName',
                textField: 'disName',
            });
        }

    </script>
</head>
<body>
省：<input class="easyui-combobox" id="pro" name="pro" value="请选择"/><br/>
市：<input class="easyui-combobox" id="city" name="city" value="请选择"/><br/>
区：<input class="easyui-combobox" id="area" name="area" value="请选择"/>
</body>
</html>