欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JQuery打造省市下拉框联动效果_jquery

程序员文章站 2022-04-13 08:16:37
...
做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容。用JQuery实现比较容易,代码以省市联动效果为例实现。

JSP页面代码如下:
复制代码 代码如下:


  • 生源地:





  • JavaScript代码如下:
    复制代码 代码如下:

    function refreshCity(){
    if($('#provinceCode').find('option:selected').val() == ""){
    $('#provinceCode').parent().nextAll('lable').remove();
    return;
    }
    //省份名称
    var provinceName = $('#provinceCode').find('option:selected').text();
    provinceName = provinceName.substring(0,provinceName.length-4);
    // 发出Json请求,查询子下拉框选项数据
    $.getJSON("baseInfo_getCitiesByProvinceId", {
    proviceCode : $('#provinceCode').val()
    }, function(data) {
    // 如果有子选项,则创建子下拉框
    if(data != null){
    // 删除下拉框父级后的所有同级
    $('#provinceCode').parent().nextAll('lable').remove();
    var childId = "city";
    // 判断是否存在下一级下拉框 不存在就创建
    if($('#'+childId).length == 0){
    // 创建一个
  • 并创建一个
  • ").appendTo($('#base'));
    }else{
    //清空子下拉框内容
    $('#' + childId).empty();
    }
    // 遍历json串,填充子下拉框
    $.each(data.city, function(i, item) {
    $('#' + childId).append(
    "");
    });
    }
    });
    }

    根据省份获取市的代码如下:
    复制代码 代码如下:

    public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
    ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);
    List cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+"");
    // 初始化准备输出的Json串
    String cityJson = "";
    // 遍历集合,构造json串
    if (cityList.size() > 0) {
    cityJson = "{\"city\":[";
    // 拼接查询到的子项
    for (int i = 0; i CityInfo city = cityList.get(i);
    String temp = "{\"code\":\"" + city.getCode()
    + "\",\"nameAndCode\":\"" + city.getName()+"("+ city.getCode() +")"
    + "\"}";
    // 如果是集合中最后一项,则拼接结束符,否则用","隔开
    if (i == cityList.size() - 1) {
    cityJson = cityJson + temp + "]}";
    } else {
    cityJson = cityJson + temp + ",";
    }
    }
    }
    // 设置输出的字符集和类型并输出json串
    response.setCharacterEncoding("UTF-8");
    response.setContentType("json");
    response.getWriter().print(cityJson);
    }
    相关标签: 下拉框 联动