【免费】jquery无限级联下拉菜单简单实例演示资源-CSDN文库

jquery下拉框

需积分: 0 14 浏览量 2020-10-23 07:06:37 上传评论收藏 67KB PDF 举报

资源推荐

资源详情

资源评论

jquery无限级联下拉菜单简单实例演示无限级联下拉菜单简单实例演示

主要向大家推荐了一个jquery无限级联下拉菜单简单实例演示，感兴趣的小伙伴们可以参考一下

本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下：

最终效果图：

因为是级联，所以数据必须是树型结构的，这里的测试数据如下：

看下效果图：

1、效果图一：

2、效果图二：

3、效果图三：

　　由图可知，下拉框的个数并不是写死的，而是动态加载的。每当下拉框选择改变的时候，会发送一次ajax请求，请求成功

返回json格式数据，当返回的数据不为空时（即有子节点时），则会向页面中添加一个下拉框，没有则不添加。

插件的实现代码如下：

(function ($) {

$.fn.CascadingSelect = function (options) {

//默认参数设置

var settings = {

url: "/Handler.ashx", //请求路径

data: "0", //初始值(字符串格式)

split: ",", //分割符

cssName: "select", //样式名称

val: "id", //<option value="id">name</option>

text: "name", //<option value="id">name</option>

hiddenName: "selVal" //隐藏域的name属性的值

}

//合并参数

if (options)

$.extend(settings, options);

//链式原则

return this.each(function () {

init($(this), settings.data);

/*

初始化

@param container 容器对象

@param data 初始值

*/

function init(container, data) {

//创建隐藏域对象,并赋初始值

var _input = $("<input type='hidden' name='" + settings.hiddenName + "' />").appendTo(container).val(settings.data);

var arr = data.split(settings.split);

for (var i = 0; i < arr.length; i++) {

//创建下拉框

createSelect(container, arr[i], arr[i + 1] || -1);

}

}

/*

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38609128

粉丝: 7
资源: 906

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip