级联下拉选，动态生成<option>标签实现，以及第二个下拉选无法显示问题

来源：互联网发布：淘宝的售后服务是什么编辑：程序博客网时间：2024/06/06 11:23

来源：http://blog.csdn.net/qigc_0529/article/details/52318347

JSP+Jquery+Oracle实现省市区三级联动下拉选菜单

自己搞了一下午,刚开始觉得还有点麻烦,不过搞过一遍之后就觉得简单了,供大家互相学习,具体代码如下:

1.jsp页面代码：

[javascript] view plain copy
</pre><pre name="code" class="html"><tr>  
                <td>所在地:</td>  
                <td>  
                    <select class="select" id="province_code" name="province_code" onchange="getCity()">  
                        <option value="">请选择</option>  
                    </select>  
  
                    <select class="select" id="city_code" name="city_code" onchange="getArea()">  
                        <option value="">请选择</option>  
                    </select>  
  
                    <select class="select" id="area_code" name="area_code">  
                        <option value="">请选择</option>  
                    </select>  
                </td>  
            </tr>  

2.js代码

[html] view plain copy
<script type="text/javascript">  
    /*加载省下拉选*/  
    $(function () {  
        $.ajax({  
            type: "post",  
            url: "${ctx}/shop/area/getProvince",  
            success: function (data) {  
                for (var i = 0; i < data.length; i++) {  
                    $('#province_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");  
                }  
            },  
            error: function () {  
                alert("加载省失败");  
            }  
        });  
    });  
    /*加载市下拉选*/  
    function getCity() {  
        var id = $("#province_code").val();  
        $("#city_code").empty();  
        $("#area_code").empty();  
        $.ajax({  
            type: "post",  
            url: "${ctx}/shop/area/getCity",  
            data: {"id": id},  
            success: function (data) {  
                $('#city_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");  
                $('#area_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");  
                for (var i = 0; i < data.length; i++) {  
                    $('#city_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");  
                }  
            },  
            error: function () {  
                alert("加载市失败");  
            }  
        });  
    }  
    ;  
    /*加载地区下拉选*/  
    function getArea() {  
        var id = $("#city_code").val();  
        $("#area_code").empty();  
        $.ajax({  
            type: "post",  
            url: "${ctx}/shop/area/getArea",  
            data: {"id": id},  
            success: function (data) {  
                $('#area_code').append("<option value='' selected='selected' >" + '请选择' + "</option>");  
                for (var i = 0; i < data.length; i++) {  
                    $('#area_code').append("<option value='" + data[i].id + "' >" + data[i].aName + "</option>");  
                }  
            },  
            error: function () {  
                alert("加载区失败");  
            }  
        });  
    }  

3.dao层文件

[java] view plain copy
public interface AreaDao {  
      
    List<Area> queryAreas(Integer pid);  
  
    Area queryAreasInfo(Integer id);  
  
    public List<Area> queryCity(Integer id);  
}  

4.Area实体类

[html] view plain copy
public class Area {  
    private Integer id;  
    private String aName;  
    private Integer pid;  
    private Integer status;  
    public Integer getId() {  
        return id;  
    }  
    public Integer getPid() {  
        return pid;  
    }  
    public Integer getStatus() {  
        return status;  
    }  
    public void setId(Integer id) {  
        this.id = id;  
    }  
    public void setPid(Integer pid) {  
        this.pid = pid;  
    }  
    public void setStatus(Integer status) {  
        this.status = status;  
    }  
  
    public String getaName() {  
        return aName;  
    }  
  
    public void setaName(String aName) {  
        this.aName = aName;  
    }  
  
    @Override  
    public String toString() {  
        return "Area [id=" + id + ", aName=" + aName + ", pid=" + pid  
                + ", status=" + status + "]";  
    }  
      
}  

5.Service层

[java] view plain copy
@Service  
@Transactional(readOnly = true)  
public class AreasService  {  
  
    @Resource  
    private AreaDao areasDao;  
  
    /** 
     * 通过pid查询Areas 
     */  
  
    public List<Area> queryAreas(Integer pid) {  
  
        return this.areasDao.queryAreas(pid);  
    }  
  
    public Area queryArea(Integer id){  
        return this.areasDao.queryAreasInfo(id);  
    }  
  
  
  
}  

6.Controller层

[java] view plain copy
@RequestMapping("/shop/area")  
@Controller  
public class AreaController {  
    @Autowired  
    private AreasService areasService;  
  
    @RequestMapping(value="getProvince" ,method  = RequestMethod.POST)  
    @ResponseBody  
    public List<Area> getProvince(){  
        List<Area> areas=areasService.queryAreas(0);  
        return areas;  
    }  
  
    @RequestMapping(value="getCity" ,method  = RequestMethod.POST)  
    @ResponseBody  
    public List<Area> getCity(Integer id){  
        List<Area> areas=areasService.queryAreas(id);  
        return areas;  
    }  
    @RequestMapping(value="getArea" ,method  = RequestMethod.POST)  
    @ResponseBody  
    public List<Area> getArea(Integer id){  
        List<Area> areas=areasService.queryAreas(id);  
        return areas;  
    }  
  
}  

7.Mapper.xml文件

[html] view plain copy
<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >  
<mapper namespace="com.***.location.dao.AreaDao" >  
  
  
    <select id="queryAreas" resultType="Area" >  
        SELECT * FROM area WHERE  pid=#{pid}  
    </select>  
  
    <select id="queryAreasInfo" resultType="Area" >  
        SELECT * FROM area WHERE  id=#{id}  
    </select>  
  
  
</mapper>  

8.Oracle数据库结构

省市区在一个表，表名是AREA ，主键是ID ，省的PID=0 ，市级的PID=省的ID，区级的PID=市级的ID

如：

ID ANAME PID

100034 河南省 0

100101 郑州市 100034

100102 濮阳市 100034

111111 中原区 100101

111112 金水区 100101

111113 高新区 100101

-------------------------------------------------------------------------------------------------

在我实际应用中，然后出现了问题，原因是我使用了前端引用了 chosen.jquery.min.js

然后导致我第二个下拉选获取到了值，但是无法显示在下拉框里面，然后正确的是需要添加chosen.jquery.min.js中的一个方法：

trigger：

代码如下：

    /*加载图书下拉选*/    $(function(){     $.ajax({            type: "post",              url: "${basePath}/manage/college/collegebookcontroller/getBookList",              success: function (data) {                for (var i = 0; i < data.length; i++) {                    $('#jform_bookId').append("<option value='" + data[i].id + "' >" + data[i].bookName + "</option>");                }            },            error: function () {                alert("加载图书失败");            }        });     //jQuery("#jform_bookSectionId").chosen();    });    /*加载图书章节下拉选*/      function getBook() {        var id = $("#jform_bookId").val();        //alert("章节"+id);        $("#jform_bookSectionId").empty();        $.ajax({            type: "post",            url: "${basePath}/manage/college/collegebooksectioncontroller/getBookSectionList",              data: {"bookId": id},            success: function (data) {             var form_bookSectionhtml="";             for (var i = 0; i < data.length; i++) {             form_bookSectionhtml = form_bookSectionhtml+"<option value=" + data[i].id + ">" + data[i].sectionOrder + "</option>";             }             $('#jform_bookSectionId').html(form_bookSectionhtml);             jQuery("#jform_bookSectionId").trigger("liszt:updated");                         },              error: function () {                  alert("加载章节失败");              }        });    };

中间还涉及到一个问题，

使用 $（"#"）方法是失败，然后使用原生的Jquery（"#"）就成功了。

阅读全文

0 0