jQuery-级联表实现

这篇博客讲述了如何使用jQuery来实现级联表的功能。首先在HTML中设置好第一层<select>,其余层级的数据通过jQuery从服务器动态加载。当上一层<select>的value发生变化时,触发change事件,根据value值异步请求数据。如果获取到数据,就填充到相应的<select>中。文章还提到了使用attr、ajaxStart、ajaxEnd、ajaxComplete、data()和animate()等jQuery技术。
摘要由CSDN通过智能技术生成

级联表分为多层,只有上一层确定数据才会显示当前层。


HTML使用<select>标签为数据分层,只需要填入第一层的数据即可,剩余层通过jQuery从服务器端导入数据。

通过CSS设置所需样式,隐藏掉(visibility 或 display)暂不显示的块,保留第一层<select>供选择。

jQuery部分:

1.为各层<select>设置 change 事件,处理下拉框数据变化后发生的事情。

2.在 change 事件中检测<select>的 value 值,使用 val() 方法。

3.value值不存在,则隐藏掉相应层和需隐藏的数据块。

4.value值存在,则通过  $.get ($.post) 方法从服务器端异步请求数据,参数为 $.post(”请求数据文件",{ 想传递的参数 },function() {  } ,返回类型("json") )。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值