jQuery实现动态菜单级联

So easy!前几天,就是打杂呀~~没什么事情干。坐我旁边的兄弟,看我没事,也想让我多学一些东西,所以说让我试着做一下项目交付件。现在想起来真是感谢啊,学到很多东西,因为我真是不太懂这些东西的。开始了解业务也很困难。切入正题吧!过程中我在后台放入两个model到request中然后到页面迭代出来。交付件中有网络、任务、交付件编号、交付件名称、交付件说明、交付件负责人、权重等信息。还可以添加行复制行,删除行。每一行都是数据库中的一条记录,先读出来,然后网络任务负责人,是根据项目号查询的出来的,具体描述是项目表查询WBS找到一个list然后再根据这个wbs号查找网络表的list(自此查到网络的list)然后根据查到得网络List中的工艺路线号再去查找任务表中的工艺路线号相等的记录。其中任务表主键是工艺路线号和通用计数器两个主键组成的复合主键(自此任务也查询出来了)。最后再根据网络号,任务的工艺路线号,通用计数器,查找项目人员分配表中的可分配人员,其中人员分配表中的主键是由网络号,工艺路线号,通用计数器,项目号组成。
可能说起来关系比较乱吧。项目交付件分配表是由网络号,工艺路线号,通用计数器,以及项目交付件编号组成。自此用到的表就介绍到此了。
问题:我在选择网络的时候,任务列表以及负责人菜单就需要同时更新,选择任务时就需要更新人员表。
做法:其实做法很简单,触发一个οnchange="change(this)"事件。然后js监控
<script type="javascript/css">
function changge(oo){//oo就是你传过来对对象
$.post(url,function(data){ //data就是处理完的传回来的字符串。
//在这里可以把字符串转化为数组,然后放到option中之后就和前一篇的恨相似了。
//注意:url是你处理的action后面可以传递参数。
//
});
}

</script>


我把js代码贴出来:
<script type="JavaScript/text">
function netSelectChange(ths){
var row = $("#datas tr").index($(ths).parent().parent()) + 1;
//jQuery获取行
$.post("ProjFileAssignAction!netSelectChange.action?aufnr="+ths.value,function(data){
//aufnr是网络号我传递的参数
var tasks = document.getElementsByName("pmodel.aful");
//pmodel.aful是任务的两个主键其中有工艺路线号和通用计数器分开 tasks是数组
var task = tasks[row-2];//获得当前行
task.options.length=0;//每次对任务菜单清零
var result = data.split(".");//字符串按"."拆分
var result = result[0].split(",");
//result数组中有工艺路线号,通用计数器,任务短描述,网络号,其中网络号是附加一起
//查询负责人的.
var aa = $.trim(result [1]) +","+ $.trim(result[2]) +","+ $.trim(result[0])//aa中村的就是工艺路线号,通用计数器,网络号,用来查询负责人的
//$.trim()是jQuery的去空格方法
taskNetSelectChange(aa,row);//把参数和行号传递给下个处理方法
//taskNetSelectChange()方法就是用来选择任务时查询负责人的
//taskNetSelectChange()和这个方法差不多
for(var i=0;i<result.length-1;i++){
var arr = result[i].split(",");
task.options.add(new Option($.trim(arr[3]),$.trim(arr[1])+","+$.trim(arr[2])+","+$.trim(arr[0])));
}
});
}
</script>
总结:
菜单1触发onchange事件 js中用$.post(url,function(data){
});url是调用的处理的action路径 data是传回来的字符串(在action中打出来的字符串)
再给目标菜单赋option就ok了
有问题提,大家一起解决.
下面介绍一些简单的小技巧等等```和大家分享
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三级级联下拉菜单可以通过Jquery+Ajax实现,以下是一个简单的示例代码: HTML代码: ```html <select id="province"> <option value="">请选择省份</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广东">广东</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区县</option> </select> ``` Jquery+Ajax代码: ```javascript $(document).ready(function() { // 加载省份列表 $.ajax({ type: "GET", url: "province.php", success: function(data) { $("#province").append(data); } }); // 省份选项改变时,加载城市列表 $("#province").change(function() { var province = $(this).val(); $("#city").html("<option value=''>请选择城市</option>"); $("#district").html("<option value=''>请选择区县</option>"); if (province != "") { $.ajax({ type: "GET", url: "city.php", data: {"province": province}, success: function(data) { $("#city").append(data); } }); } }); // 城市选项改变时,加载区县列表 $("#city").change(function() { var province = $("#province").val(); var city = $(this).val(); $("#district").html("<option value=''>请选择区县</option>"); if (city != "") { $.ajax({ type: "GET", url: "district.php", data: {"province": province, "city": city}, success: function(data) { $("#district").append(data); } }); } }); }); ``` 在省份、城市、区县列表对应的php文件中,需要根据传入的参数返回对应的选项列表。例如,city.php文件可能如下所示: ```php $province = $_GET["province"]; echo "<option value=''>请选择城市</option>"; if ($province == "北京") { echo "<option value='北京市'>北京市</option>"; } else if ($province == "上海") { echo "<option value='上海市'>上海市</option>"; } else if ($province == "广东") { echo "<option value='广州市'>广州市</option>"; echo "<option value='深圳市'>深圳市</option>"; echo "<option value='珠海市'>珠海市</option>"; } ``` 类似地,district.php文件也需要根据传入的参数返回对应的选项列表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值