springmvc 三级联动纯js代码实现附加添加编辑实现

怼烎@ 2022-06-10 01:17 179阅读 0赞

首先：jsp页面先写好标签  
  
  
<div class="form-item-account">  
                 <select style="width: 223px;height: 30px;" id="province" name="customer\_province\_id" data-click="changeCity">     
                        <option value="0">---请选择---</option>     
                    </select>  
                    <select style="width: 223px;height: 30px;" id="city" name="customer\_city\_id" data-click="changeArea">  
                        <option value="0">---请选择---</option>     
                    </select>  
                    <select id="area" name="customer\_area\_id" style="width: 223px;height: 30px; margin-bottom:10px;">  
                        <option value="0">市、县、区</option>     
                    </select>  
                </div>  
  
  
添加信息页面的三级联动：  
  
仅仅实现三级联动即可：  
  
添加的页面js代码：  
  
我这里用的是顾客表，里面是顾客的信息表，包含了地址，所以我们要进行三级联动进行添加进入。  
  
$(function()\{  
          
        //页面加载完成初始化省级列表  
        getAddress();  
          
        //选中之后触发事件返回下级列表  
        $("\#province, \#city").click(function(e) \{    
//当id=province，或者id=city的select被点击时触发  
  
  
           var type = $(this).attr("data-click");  
//获取对应触发id的属性data-click的值  
//注意：我们 province的data-click的属性值为changeCity,city为changeArea，area没有data-click值。  
  
        if("changeCity"==type)\{  
 // 获取type的值主要是为了区分点击了哪个select，从而改变哪个块，如果点击了province的块，我们就让area块的信息为空  
                $("\#area").empty();  
                $("\#area").append("<option value=''>市、县、区</option>");  
//添加上市，县，区的提醒字样  
            \}  
            var area\_name = $(this).children("option:selected").val();  
 //获取对应触发select的id的option选中的值，注意，这里的值是一个数字，也就是value,不是text,text是指“广东”“广州”这些，value对应text的id。  
            getAddress(type, area\_name);  
//然后我们调用getAddress方法，将对应点击了是province,还是city和值传过去。  
           \});  
    \});    
           
    function getAddress(type, area\_name)\{  
          
  
 //声明selectedID,用于对应我们select标签的id名，到时候进行动态调用。  
  
var selectedID = "";  
  
//如果选中的是province，我们就将selectedID对应到city块，因为点击了省，当然要去寻找省对应的市  
  
if("changeCity"==type) selectedID = "\#city";  
  
//如果选中的是city，我们就将selectedID对应area模块  
  
 else if("changeArea"==type) selectedID = "\#area";  
  
 //如果都不是，也就是type为空，那么我们可以认为是刚开始页面加载，所以当然是查省，所以selectID为province//调用接口，返回数据并显示  
  
else selectedID = "\#province"; st.request("getAddress.do", \{"type":type, "area\_name" : area\_name \}, function(msg)\{  
  
 // 调用异步，获取城市数据  
  
  var data = msg.obj;  
//msg是后台返回的list<object\[\]>  
 $(selectedID).empty();  
//设空  
for(var i=0;i<data.length;i++)\{  
//拿到值之后，我们遍历进selectedID中  
if(data\[i\]\[0\]!="")  
 $(selectedID).append("<option value="+data\[i\]\[0\]+">"+data\[i\]\[1\]+"</option>");  
 \}  
 \});  
//这是一个封装的异步，我贴出来  
var st =\{\};  
st.request = function(req\_url, datas, callback)\{  
      
     $.ajax(\{  
            type: "POST",  
            url: req\_url,  
            data: datas,  
            dataType: "json",  
            success: function(msg)\{  
               callback(msg);  
            \},  
            error: function(XMLHttpRequest, textStatus, errorThrown)\{      
                top.location.href = "pages/common/500.jsp";  
            \}     
         \});  
\};  
  
  
  
  
编辑页面：  
  
如何能让数据从后台显示到jsp页面的三级联动select中  
  
首先：我们在添加三级联动数据的时候就将省，市，区的id分别保存到城市表中  
  
这样子我们编辑的时候就可以拿出来与三级联动的搜索城市给一个判断，然后设为选中了。  
  
jsp页面：  
  
说明一下，我将要编辑的城市数据的id分别放到隐藏域中：customer\_province\_id,customer\_city\_id,customer\_area\_id中，用于进行拿出判断。  
  
<input style="display:none" type="text" name="customer\_province\_id" id="customer\_province\_id" class="field fwidth" value="" placeholder="">  
                   <input style="display:none" type="text" name="customer\_city\_id" id="customer\_city\_id" class="field fwidth" value="" placeholder="">  
                   <input  style="display:none" type="text" name="customer\_area\_id" id="customer\_area\_id" class="field fwidth" value="" placeholder="">  
                 
                   <div class="form-item-account">  
                    <select style="width: 223px;height: 30px;" id="province" name="c\_province" data-click="changeCity">     
                        <option value="0">---请选择---</option>     
                    </select>  
                    <select style="width: 223px;height: 30px;" id="city" name="c\_city" data-click="changeArea">  
                        <option value="0">---请选择---</option>     
                    </select>  
                    <select id="area" name="c\_area" style="width: 223px;height: 30px; margin-bottom:10px;">  
                        <option value="0">市、县、区</option>     
                    </select>  
                </div>  
  
  
  
  
  
编辑jsp页面js代码如下:  
  
其实和增加页面是一样的，仅仅多出几句，用红字标出  
  
$(function()\{  
            var customer\_id= window.location.search.substr(1);  
            //我用的是easyui form表单加载，会自动将后台返回的json数据加载回来到页面对应的名称标签对应  
                //你们可以用自己的方式进行加载，把要编辑的数据返回即可。  
               $('\#alter\_customer\_form').form('load','checkaltercustomer.do?'+customer\_id);  
  
              
              
            //页面加载完成初始化省级列表  
            getAddress();  
            //选中之后触发事件返回下级列表  
            $("\#province, \#city").click(function(e) \{    
                var type = $(this).attr("data-click");  
                if("changeCity"==type)\{  
                    $("\#area").empty();                      
                    $("\#area").append("<option value=''>市、县、区</option>");  
                \}  
                var area\_name = $(this).children("option:selected").val();    
                getAddress(type, area\_name);  
                  
                  
               \});  
       //这里仅仅是用于设置时间执行查询市和区  
          setTimeout("getAddress('changeCity', $('\#customer\_province\_id').val());", 100);  
          setTimeout("getAddress('changeArea', $('\#customer\_city\_id').val());", 100);  
  
      
        \});    
        
               
        function getAddress(type, area\_name)\{  
              
            var selectedID = "";  
              
            //获取要显示的元素ID  
            if("changeCity"==type)  selectedID = "\#city";  
            else if("changeArea"==type)  selectedID = "\#area";  
            else selectedID = "\#province";  
              
            //调用接口，返回数据并显示  
            st.request("getAddress.do", \{"type":type, "area\_name" : area\_name \}, function(msg)\{  
                var data = msg.obj;                  
                $(selectedID).empty();  
                  
                for(var i=0;i<data.length;i++)\{  
                    if(data\[i\]\[0\]!="")  
                                         //如果我们获取到的隐藏域对应的id的值正好是遍历到的值  
                                       if(data\[i\]\[0\]==$('\#customer\_'+selectedID.substr(1)+'\_id').val())  
                            \{  
                                     //将它设为选中  
                            $(selectedID).append("<option selected='selected' value="+data\[i\]\[0\]+">"+data\[i\]\[1\]+"</option>");        
                          
                                  
                            \}  
                            else  
                        $(selectedID).append("<option value="+data\[i\]\[0\]+">"+data\[i\]\[1\]+"</option>");  
                \}  
              
            \});  
                
         \}  
  
  
  
  
  
  
  
后台control类：  
  
@RequestMapping("/getAddress")  
    public Object getArea(String type,String area\_name)throws Exception \{  
          
        List<Object\[\]> list = area\_name == null ? customerService.getAddress(type) : customerService.getAddress(type,area\_name);  
        String message = list == null ? "获取地址失败":"获取成功";  
      
        return  list;  
    \}  
  
  
impl:  
  
我用的是dbutils查询数据库，所以有这个：  
  
list = runner.query(sql, new ArrayListHandler(),params);  
  
你们就用你们对应的数据库查询工具即可  
  
@Autowired  
    QueryRunner runner;  
  
@Override  
    public List<Object\[\]> getAddress(String type,Object... params) \{  
          
        String sql = "";  
        List<Object\[\]> list = null;  
          
        try \{  
            if("changeCity".equals(type))  
                //查询市级  
                sql = "SELECT n.ID,n.AREA\_NAME FROM sys\_p\_area m,sys\_p\_area n WHERE m.LEVEL\_ID = '2' AND m.ID = n.PARENT\_ID AND m.ID = ?";  
            else if("changeArea".equals(type))  
                //查询地区  
                sql = "SELECT o.ID,o.AREA\_NAME FROM sys\_p\_area m,sys\_p\_area n,sys\_p\_area o WHERE m.LEVEL\_ID = '2' AND m.ID = n.PARENT\_ID AND n.ID = o.PARENT\_ID AND n.ID = ?";  
            else  
                //查询省级  
                sql = "SELECT t.ID,t.AREA\_NAME FROM sys\_p\_area t WHERE t.LEVEL\_ID = '2'";  
              
            list = runner.query(sql, new ArrayListHandler(),params);  
              
        \} catch (SQLException e) \{  
            log.error("获取地址异常", e);  
            throw new RuntimeException(e);  
        \}  
        return list;  
    \}

这是我的数据库表：

客户表：

![Center][]  
  
![Center 1][]

城市表：

![Center 2][]

[Center]: /images/20220610/d37eb5c49274463d9d64a2f368906eef.png
[Center 1]: /images/20220610/4b4c5e11c76c4e18a06a61dfa126e3fe.png
[Center 2]: /images/20220610/a61d717da89648d7991df014f1238d00.png