jquery插件实现无限级级联下拉框

最新推荐文章于 2022-04-02 15:41:48 发布

s24963386

最新推荐文章于 2022-04-02 15:41:48 发布

阅读量440

点赞数

分类专栏： javascript 文章标签： jQuery json JavaScript Ajax HTML ViewUI

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

项目中经常用到级联下拉框，虽然是一个简单的功能，但每用到一次写一次，用到一次写一次，也烦，找原来写的也烦，这次重新写一个放到iteye（第一次用这新名）这里，以后用到的时候随时可以找到，也顺便和大家分享一下，很简单的一段代码：

<html>

<head>

<title></title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
(function($){
    $.fn.extend({
        loadSelect:function(opt){
            var defaultOpt={
                url:"select.json",
                pid:""
            };
            var opts = $.extend(defaultOpt,opt);
            var $this=$(this);
            $.getJSON(opts.url,function(json){
                var html='<select οnchange="javascript:$(this).selectSelect()"><option value="0">请选择</option>';
                $.each(json,function(i,n){
                    html+= '<option value="'+n.id+'">'+n.text+"</option>\n";
                }); 
                html += "</select>\n";
                $this.append(html);
            });
        },
        selectSelect:function(opt){
            var defaultOpt={
                url:"select_data.json",
                pid:""
            };
            var opts = $.extend(defaultOpt,opt);
            var $this=$(this);
            $this.nextAll().remove();
            $.getJSON(opts.url,function(json){
                var html='<select οnchange="javascript:$(this).selectSelect(this)"><option value="0">请选择</option>';
                $.each(json,function(i,n){
                    html+= '<option value="'+n.id+'">'+n.text+"</option>\n";
                }); 
                html += "</select>\n";
                $this.after(html);
            });
        }
    });

})(jQuery);
$(function(){$("#cascade").loadSelect({url:"select_data.json"});});
</script>
</head>
<body>
<div id="cascade">
</div>
</body>

</html>

当然，这段代码功能还有很多改进的地方，比如下拉框的个数初始化，以及联动的初始化等等。有兴趣的朋友或者已经有实现了的朋友也请分享下。

s24963386

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件实现无限级级联下拉框

项目中经常用到级联下拉框，虽然是一个简单的功能，但每用到一次写一次，用到一次写一次，也烦，找原来写的也烦，这次重新写一个放到iteye（第一次用这新名）这里，以后用到的时候随时可以找到，也顺便和大家分享一下，很简单的一段代码： &lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;scri...
复制链接

扫一扫

专栏目录