下拉菜单连动效果的一种用法

页面js:

/*** 物料分类Json* {mainId:{*        mainName, subJsonObject:{*          subId:{subName, minJsonObject:{*                minid:minName}}}}}*/
var materialTypeInfoJson;
$(function(){//更改物料大分类获取对应中分类和小分类$("#mainTypeId").on("change", function(){var mainTypeId = $("#mainTypeId").val();var subTypeId = $("#subTypeId").val();var mainId = $("#subTypeId").find("[value='"+subTypeId+"']").attr("pater");if(mainTypeId != undefined && mainTypeId != ""){$("#subTypeId").children(":gt(0)").hide();$("#subTypeId").children("[pater='"+mainTypeId+"']").show();if(mainId != mainTypeId){$("#subTypeId").val("");}}else{$("#subTypeId").children().show();$("#subTypeId").val("")}$("#subTypeId").trigger("change");});//更改物料中分类获取对应大分类和小分类$("#subTypeId").on("change", function(){var subTypeId = $("#subTypeId").val();var minTypeId = $("#minTypeId").val();var subId = $("#minTypeId").find("[value='"+minTypeId+"']").attr("pater");$("#minTypeId").children(":gt(0)").hide();if(subTypeId != undefined && subTypeId != ""){var mainId = $("#subTypeId").find("[value='"+subTypeId+"']").attr("pater");$("#mainTypeId").val(mainId);$("#subTypeId").children(":gt(0)").not("[pater='"+mainId+"']").hide();$("#minTypeId").children("[pater='"+subTypeId+"']").show();if(subId != subTypeId){$("#minTypeId").val("");}}else{$("#subTypeId").children(":gt(0)").each(function(){var style = $(this).attr("style");if(/display: none;/.test(style)){return;};var subId_temp = $(this).val();$("#minTypeId").children("[pater='"+subId_temp+"']").show();});$("#minTypeId").val("");}});//更改物料小分类获取对应大分类和中分类$("#minTypeId").on("change", function(){var minTypeId = $("#minTypeId").val();if(minTypeId != undefined && minTypeId != ""){var subId = $("#minTypeId").find("[value='"+minTypeId+"']").attr("pater");$("#subTypeId").val(subId);$("#subTypeId").trigger("change");}});//获取物料分类Jsonif(materialTypeInfoJson == undefined || materialTypeInfoJson == ""){$.ajax({type : "post",url : contentPath + "/ajax/getMaterialTypeInfo.do",async : false,success : function(data) {materialTypeInfoJson = data;},dataType : "json"});drawSelectOption(materialTypeInfoJson);}
});
//根据传过来的参数，画物料分类下拉框选项
function drawSelectOption(jsonObj){var mainTypeSelect = $("#mainTypeId");var mainTypeId = mainTypeSelect.val();mainTypeSelect.empty();$("<option value>N/A</option>").appendTo(mainTypeSelect);var subTypeSelect = $("#subTypeId");var subTypeId = subTypeSelect.val();subTypeSelect.empty();$("<option value>N/A</option>").appendTo(subTypeSelect);var minTypeSelect = $("#minTypeId");var minTypeId = minTypeSelect.val();minTypeSelect.empty();$("<option value>N/A</option>").appendTo(minTypeSelect);$.each(jsonObj, function(k,v){var mainId = k;var mainName = v.mainName;var subJsonObject = v.subJsonObject;$("<option value=\""+mainId+"\">"+mainName+"</option>").appendTo(mainTypeSelect);$.each(subJsonObject, function(k,v){var subId = k;var subName = v.subName;var minJsonObject = v.minJsonObject;$("<option value=\""+subId+"\" pater=\""+mainId+"\">"+subName+"</option>").appendTo(subTypeSelect);if(minJsonObject == undefined){return;}$.each(minJsonObject, function(k,v){var minId = k;var minName = v.minName;$("<option value=\""+minId+"\" pater=\""+subId+"\">"+minName+"</option>").appendTo(minTypeSelect);});});});mainTypeSelect.val(mainTypeId);mainTypeSelect.trigger("change");subTypeSelect.val(subTypeId);subTypeSelect.trigger("change");minTypeSelect.val(minTypeId);minTypeSelect.trigger("change");
}

Action:

public class GetMaterialTypeInfoAction extends ERPSTDProxyAction{protected ActionForward doExecute(FormBean parameterFB, ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response)throws Exception {TableBean materialTypeTB = this.getERPServiceDelegation().getItemMasterService().getMaterialTypeInfo();JSONObject jsonObject = new JSONObject();JSONObject mainTypeJSONObject = null;//大分类JSONObject subTypeJSONObject = null;//中分类JSONObject subJsonObject = null;//中分类JSONObject minTypeJSONObject = null;//小分类JSONObject minJsonObject = null;//小分类for(int i = 0; i < materialTypeTB.size(); i ++){RowBean materialTypeRB = materialTypeTB.get(i);String mainId = materialTypeRB.getCellBeanValue("mainId");String mainName = materialTypeRB.getCellBeanValue("mainName");String subId = materialTypeRB.getCellBeanValue("subId");String subName = materialTypeRB.getCellBeanValue("subName");String minId = materialTypeRB.getCellBeanValue("minId");String minName = materialTypeRB.getCellBeanValue("minName");//处理大分类if(jsonObject.containsKey(mainId)){mainTypeJSONObject = jsonObject.getJSONObject(mainId);}else{mainTypeJSONObject = new JSONObject();mainTypeJSONObject.put("mainName", mainName);subJsonObject = new JSONObject();}//处理中分类if(subJsonObject.containsKey(subId)){subTypeJSONObject = subJsonObject.getJSONObject(subId);}else{subTypeJSONObject = new JSONObject();subTypeJSONObject.put("subName", subName);minJsonObject = new JSONObject();}//处理小分类minTypeJSONObject = new JSONObject();minTypeJSONObject.put("minName", minName);minJsonObject.put(minId, minTypeJSONObject);//json是用值传递，内容更改后需重新保存subTypeJSONObject.put("minJsonObject", minJsonObject);subJsonObject.put(subId, subTypeJSONObject);mainTypeJSONObject.put("subJsonObject", subJsonObject);jsonObject.put(mainId, mainTypeJSONObject);}PrintWriter pw = response.getWriter();pw.print(jsonObject.toString());pw.flush();return null;}
}

下拉菜单连动效果的一种用法相关推荐

js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化这是一款使用ht ...
Jquery实现下拉菜单滑动效果
关于下拉菜单的布局以及原始采用jquery的写法详见这篇博客:(1条消息) Jquery案例-下拉菜单_setTimeout()的博客-CSDN博客_jquery下拉菜单案例上面这篇博客的下拉菜单案 ...
layui结合ajax实现下拉菜单联动效果
大家好好,我是雄雄,欢迎关注公众号:雄雄的小课堂. 昨天分享的是使用layui集合springboot实现图片上传,文章地址在这里,需要的小伙伴们可以去看看: 今天给大家分享的内容也是那天在造项目的时 ...
mysql 省市县三级联动查询_PHP+AJAX+MYSQL 仿凡客诚品省市县三级联动下拉菜单查询效果...
连接数据库:db.php $dbhost="localhost"; $dbpassword="123"; $dbuser ='root';//数据库用户名 $d ...
android联动下拉菜单,Android spinner下拉框连动
本代码主要功能 1. 向拉菜单 spinner添加数据 2.下拉菜单连动以下是核心代码 //定义变量 private Spinner spinner3; private Spinner spinne ...
html hover效果下拉个框,CSS实现Hover下拉菜单的方法
老规矩,今天来讲一个很实用的css效果,当鼠标移到按钮的时候就会自动显示下拉菜单.效果如下: 很简单的一个小demo,实现步骤如下: 首先定义一个大的div包裹一个button和一个a链接组分别设置d ...
兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...

下拉菜单连动效果的一种用法

下拉菜单连动效果的一种用法相关推荐

最新文章

热门文章