标签：func 接收 pre 联动 编码 root attribute text add
需求描述：点击服务类型下拉框，选择后，后边的服务类别会自动的匹配到与服务类型相对应的，卧槽，绕来绕去的，说不明白啦。举个例子：服务类型A,B,C三个可选，当选择A的时候，服务类别会自动填充上A01，A02，A03，当选择B的时候，服务类别会自动填充上Bf，Bg，Bh，当选择C的时候，服务类别会自动填充上C1，C2，C3，就是和地区三级联动差不多的那种，我靠，最后一句就说明白了，晕死_(|3」∠)_
思路分析：后台查服务类型的Aname和Acode，并且放到一个list中。把这个list传递到前台去遍历取值。对这个select加一个监听，如果选择了，就获取到选择内容，并且可以得到该服务类型的Aname和Acode，把Aname和Acode通过ajax传递到后台，后台接收(查数据库的条件，用哪个，传递那个)，查数据库，查询条件是Aname 或者 Acode，得到服务类别的list，同样的把该list传递到前台，前台拼接 废话就这么多了，上代码：
代码：
//后台java代码 去新增页面
map.addAttribute("serviceTypeList", serviceTupe);
return VIEW_PATH + "/add";
//html代码：前台遍历取出服务类型 select的value是list(serviceTypeList)中元素的code select的text是元素的name
<div class="col-md-5">
<select id="serviceType" name="serviceType" placeholder="请选择服务类型">
<option th:each="level : ${serviceTypeList}"
th:value="${level.serviceCode}"
th:text="${level.serviceName}" xmlns:th="http://www.w3.org/1999/xhtml">
</option>
</select>
<input type="hidden" th:value="${inputType}" name="inputType" id="inputType"/>
</div> <div class="col-md-5">
<select id="serviceClass" name="serviceClass" placeholder="请选择服务类别">
//说明一下 select的option选项是后边的js里拼接上去的
</select>
</div>
//js代码：当服务类型的select被触发选择了，执行查询服务类型选择的内容的下属值，也就是A01 A02 A03或者Bf Bg Bh或者 C1 C2 C3 $("#serviceType").on("change",function () {
debugger;
var seled = $(this).val();
$("#inputType").val(seled);
var serviceText=$("#serviceType").find("option:selected").text();
var serviceVal=$("#serviceType").val();
//去后台findServClass方法查 根据选择的服务类型查询出对应的下属值
var url = rootPath + ‘/serv/service/findServClass‘;
var s = CommnUtil.ajax(url, {
serviceName: serviceText,
serviceCode: serviceVal
}, "json");
if(!!s && s.length > 0){
$("#serviceClass").empty();
var item;
$.each(s,function(i,result){
//给serviceClass也就是第二个下拉框拼接上option选择项
$("#serviceClass").append($("<option/>").text(result[‘className‘]).attr("value",result[‘classCode‘]));
});
}else{
$("#serviceClass").empty();
}
});
//后台java代码 findServClass方法 @RequestMapping("/findServClass")
@ResponseBody
public Object findServClass(String serviceName,String serviceCode){
List<ServiceClass> list = new ArrayList<>();
try {
//根据serviceCode查出服务类别 serviceName没有用到，这个参数可以不用传的
list=sysServService.serviceClassList(serviceCode);
} catch (Exception e){
e.printStackTrace();
}
return list;//返回的list就是上边的ajax里的s
}
说明：中间传递了一个serviceName没有用到，而是用了serviceCode，这是因为在数据库表服务类别表serviceClass表中有serviceCode服务编码这个字段，所以只要加上where serviceCode=‘xx服务编码’ 就可已查出对应的下属值
注意一点：js代码要写在初始化中，也就是
$(function () {
$("#serviceType").on("change",function () {
//代码省略
});
}标签：func 接收 pre 联动 编码 root attribute text add
原文地址：https://www.cnblogs.com/xuchao0506/p/9772982.html
