JavaScript 三级联动的实现
最近项目用用到了“添加商品”，商品有所属商品、一级类目、二级类目等，从而构成了三个级别，为了提升用户体验，做了如下的三级联动
准备工作：
一、获取后台数据，
public class MenuJSON {
public static void GetMenuJsonData(HttpServletRequest request) {
User user = (User) request.getSession().getAttribute("user");
List<Shop> shops = new ArrayList<Shop>();
Shop shop = new Shop();
if(user.getCompanyId()==0){//超级管理员
shops = DaoFactory.getShopDao().getAllShop();
}else{//普通管理员
shop=DaoFactory.getShopDao().getShop(user.getCompanyId());
shops.add(shop);
}
List<Map> listMap_shopLevelType = new ArrayList<Map>();
List<Map> listMap_levelOneType = new ArrayList<Map>();
List<Map> listMap_levelTwoType = new ArrayList<Map>();
List<LevelOneType> levelOneTypes = new ArrayList<LevelOneType>();
List<LevelTwoType> levelTwoTypes = new ArrayList<LevelTwoType>();
Map<String, Object> map_shopLevelType = new HashMap<String, Object>();
Map<String, Object> map_levelOneType = new HashMap<String, Object>();
Map<String, Object> map_levelTwoType = new HashMap<String, Object>();
int shopId;
int levelOneTypeId;
int levelTwoTypeId;
int referenceTypeId;
for(int i=0;i<shops.size();i++){
shop = shops.get(i);
shopId = shop.getId();
map_shopLevelType = new HashMap<String, Object>();
listMap_levelOneType = new ArrayList<Map>();
map_shopLevelType.put("shopId", shopId);
map_shopLevelType.put("shopName", shop.getName());
levelOneTypes = DaoFactory.getLevelOneTypeDao().getAllLevelOneType(shop.getId());
levelTwoTypes = DaoFactory.getLevelTwoTypeDao().getAllLevelTwoTypeByShopId(shop.getId());
for(int j=0;j<levelOneTypes.size();j++){
levelOneTypeId = levelOneTypes.get(j).getId();
map_levelOneType = new HashMap<String, Object>();
listMap_levelTwoType = new ArrayList<Map>();
map_levelOneType.put("levelOneTypeId", levelOneTypeId);
map_levelOneType.put("levelOneTypeName", levelOneTypes.get(j).getName());
for(int k=0;k<levelTwoTypes.size();k++){
levelTwoTypeId = levelTwoTypes.get(k).getId();
referenceTypeId = levelTwoTypes.get(k).getReferenceTypeId();
if(referenceTypeId == levelOneTypeId){
map_levelTwoType = new HashMap<String, Object>();
map_levelTwoType.put("levelTwoTypeId", levelTwoTypeId);
map_levelTwoType.put("levelTwoTypeName", levelTwoTypes.get(k).getName());
listMap_levelTwoType.add(map_levelTwoType);
//map_levelTwoType.clear();
}
}
map_levelOneType.put("levelTwoTypes", listMap_levelTwoType);
//listMap_levelTwoType.clear();
listMap_levelOneType.add(map_levelOneType);
//map_levelOneType.clear();
}
map_shopLevelType.put("levelOneTypes", listMap_levelOneType);
//listMap_levelOneType.clear();
listMap_shopLevelType.add(map_shopLevelType);
//map_shopLevelType.clear();
}
JSONArray jsonArray = JSONArray.fromObject(listMap_shopLevelType);
String shopsLevelTypesJsonString = jsonArray.toString();
//System.out.println(jsonArray);
request.setAttribute("shopsLevelTypesJsonString", shopsLevelTypesJsonString);
}
}
二、前台获取数据，JS操作，动态填充select内的option内容（包括初始的selected状态）
$(document).ready(function() {
//商品店铺 一级类目 二级类目 select联动
$(function(){
$("#shopName").each(function(){
var shopsLevelTypesJson = shopsLevelTypesJsonObj;
var temp_html='';
var changeFlag=0;
//初始化商品名称
var ShopName = function(){
$("#shopName option").remove();
if(typeof(shopsLevelTypesJson) == "undefined" || shopsLevelTypesJson.length == 0){
alert("商品店铺为空，请先添加店铺!!!");
}else{
temp_html+="";
$.each(shopsLevelTypesJson,function(i,shop){
if(typeof(commodityJson) != "undefined"&&commodityJson.shopName==shop.shopName){
temp_html+="+shop.shopName+"";
}else{
temp_html+="+shop.shopName+"";
}
});
$("#shopName").append(temp_html);
LevelOneType();
}
};
//赋值商品一级类目
var LevelOneType = function(){
temp_html = "";
// var size=$("#shopName").get(0).size();
// alert(size);
var n = $("#shopName").get(0).selectedIndex;
//alert(n);
if(n == 0){
$("#commodityLevelOne option").remove();
temp_html+="";
$("#commodityLevelOne").append(temp_html);
LevelTwoType();
}else{
n -= 1;
$("#commodityLevelOne option").remove();
if(typeof(shopsLevelTypesJson[n].levelOneTypes) =="undefined" || shopsLevelTypesJson[n].levelOneTypes.length == 0){
temp_html+="";
$("#commodityLevelOne").append(temp_html);
alert('店铺 "'+shopsLevelTypesJson[n].shopName+'" 一级类目为空,请先创建一级类目!!!');
}else{
temp_html+="";
$.each(shopsLevelTypesJson[n].levelOneTypes,function(i,levelOneType){
// if(typeof(commodityJson) == "undefined" || commodityJson.length == 0){
if(typeof(commodityJson) != "undefined"&&commodityJson.levelOne==levelOneType.levelOneTypeId){
temp_html+="+levelOneType.levelOneTypeName+"";
}else{
temp_html+="+levelOneType.levelOneTypeName+"";
}
});
$("#commodityLevelOne").append(temp_html);
LevelTwoType();
}
}
};
//赋值商品二级类目
var LevelTwoType = function(){
temp_html = "";
var m = $("#shopName").get(0).selectedIndex;
var n = $("#commodityLevelOne").get(0).selectedIndex;
if(n == 0 || m == 0){
$("#commodityLevelTwo option").remove();
temp_html+="";
$("#commodityLevelTwo").append(temp_html);
}else{
m -= 1;
n -= 1;
$("#commodityLevelTwo option").remove();
if(typeof(shopsLevelTypesJson[m].levelOneTypes[n].levelTwoTypes) == "undefined" || shopsLevelTypesJson[m].levelOneTypes[n].levelTwoTypes.length == 0){
temp_html+="";
$("#commodityLevelTwo").append(temp_html);
alert('店铺 "'+shopsLevelTypesJson[m].shopName+'" 中一级类目 "'+shopsLevelTypesJson[m].levelOneTypes[n].levelOneTypeName+'" 的二级类目为空,请先创建对应的二级类目!!!');
}else{
temp_html+="";
$.each(shopsLevelTypesJson[m].levelOneTypes[n].levelTwoTypes,function(i,levelTwoType){
if(typeof(commodityJson) != "undefined"&&commodityJson.type==levelTwoType.levelTwoTypeId){
temp_html+="+levelTwoType.levelTwoTypeName+"";
}else{
temp_html+="+levelTwoType.levelTwoTypeName+"";
}
});
$("#commodityLevelTwo").append(temp_html);
}
}
};
//选择商店名称-->改变商品一级类目
$("#shopName").change(function(){
changeFlag = 1;
LevelOneType();
});
//选择商品一级类目-->改变商品二级类目
$("#commodityLevelOne").change(function(){
changeFlag = 1;
LevelTwoType();
});
//初始化select
ShopName();
});
});
//insertShop.jsp页面验证
$("#insertForm").validate({
//验证成功时的CSS中类的名字
//success: "valid",
//验证失败时的CSS中类的名字
errorClass: "invalid",
rules: {
shopName: {isSelect: true},
commodityLevelOne: {isSelect: true},
commodityLevelTwo: {isSelect: true},
commodityName: {required: true},
unit: {required: true},
price: {required: true,number: true,isFloatGtZero: true},
carriage: {required: true,number: true,isFloatGtZero: true},
manufactureDate: {dateISO: true},
period: {required: true,digits:true}
},
messages: {
shopName: {isSelect: "请选择商品所属店铺名称"},
commodityLevelOne: {isSelect: "选择商品一级类目"},
commodityLevelTwo: {isSelect: "选择商品二级类目"},
commodityName: {required: "商品名称不能为空"},
unit: {required: "商品单位不能为空"},
price: {required: "商品价格不能为空",number:"商品价格为数字(正数，小数)",isFloatGtZero:"商品价格大于0"},
carriage: {required: "商品运费不能为空",number:"商品运费为数字",isFloatGtZero:"商品价格大于0"},
manufactureDate: {dateISO:"生产日期格式错误"},
period: {required: "产品保质期不能为空",digits:"产品保质期必须为正整数"}
},
//required: "商品生产日期不能为空"
errorPlacement: function(error, element) {
error.appendTo(element.parent().next().next());//错误信息的显示位置:当前标签的父标签的下一个标签
}
});
//insertShop.jsp页面验证
$("#updateForm").validate({
//验证成功时的CSS中类的名字
//success: "valid",
//验证失败时的CSS中类的名字
errorClass: "invalid",
rules: {
shopName: {isSelect: true},
commodityLevelOne: {isSelect: true},
commodityLevelTwo: {isSelect: true},
commodityName: {required: true},
unit: {required: true},
price: {required: true,number: true,isFloatGtZero: true},
carriage: {required: true,number: true,isFloatGtZero: true},
manufactureDate: {dateISO: true},
period: {required: true,digits:true}
},
messages: {
//shopName: {isSelect: "请选择商品所属店铺名称"},
//commodityLevelOne: {isSelect: "选择商品一级类目"},
//commodityLevelTwo: {isSelect: "选择商品二级类目"},
commodityName: {required: "商品名称不能为空"},
unit: {required: "商品单位不能为空"},
price: {required: "商品价格不能为空",number:"商品价格为数字(正数，小数)",isFloatGtZero:"商品价格大于0"},
carriage: {required: "商品运费不能为空",number:"商品运费为数字",isFloatGtZero:"商品价格大于0"},
manufactureDate: {dateISO:"生产日期格式错误"},
period: {required: "产品保质期不能为空",digits:"产品保质期必须为正整数"}
},
//required: "商品生产日期不能为空"
errorPlacement: function(error, element) {
error.appendTo(element.parent().next().next());//错误信息的显示位置:当前标签的父标签的下一个标签
}
});
});