当前位置:  编程技术>jquery

jquery select联动操作的小例子

    来源: 互联网  发布时间:2014-09-03

    本文导语:  本节内容: jquery实现select联动操作。 1,完整代码:   代码示例: (function(){     //select操作     $.fn.loadSelect = function(opt){         opt = $.extend({}, {             required:false,//为真则添加required值             noda...

本节内容:
jquery实现select联动操作。

1,完整代码:
 

代码示例:
(function(){
    //select操作
    $.fn.loadSelect = function(opt){
        opt = $.extend({}, {
            required:false,//为真则添加required值
            nodata:null,//子级无数据时 select 的状态。可设置为:"none"(display隐藏) | "hidden"(visibility隐藏) | 无
            data:[],
            loadCall:function(){}
        }, opt);
        var d = {}, callback = function(data, s){
            var html = '';
            $.each(data||[], function(i,n){
                d = n.id ? n : {
                    id:i,
                    text:n
                };
                html += ''+d.text+'';
            });
            s.html(r+html);
            (r || html) && s.trigger('change');
            switch(opt.nodata){
                case 'none':
                    html === '' ? s.hide() : s.show();
                    break;
                case 'hidden':
                    s.css('visibility', html === '' ? 'hidden' : 'visible');
                    break;
            }
            $.isFunction(opt.loadCall) && opt.loadCall.call(s);
        }, r = opt.required ? ''+($.type(opt.required) == 'string' ? opt.required : '-请选择-')+'' : '';
        return this.each(function(){
            var s = $(this);
            if(s.is('select')){
                if(typeof(opt.data) === 'string'){
                    s.empty();
                    $.getJSON(opt.data, function(json){
                        callback(json, s);
                    });
                }else{
                    callback(opt.data, s);
                }
            }
        });
    },
    //select联动
    $.fn.linkage = function(opt){
        opt = $.extend({}, { // www.
            build:true,//自动创建不存在的?
            selects:['#city', '#area'],//子集select,按顺序,jquery选择器(.#)
            seldef:[],//默认值,1以后和上项对应,可是id或者text
            required:true,
            nodata:'',
            url:'/company/getCity.html?id={$id}',//子数据,string,{$id} or {$text}页码信息
            data:[],//父级的数据
            def:0//父级默认值
        }, opt);
        var mkSelect = function(i){
            var n = child[i], nN = $(n);
            if( i && n && opt.build && nN.length === 0 ){
                var sn = n.substr(1), ci = n.substr(0, 1) == '#' ? 'id="'+sn+'"' : 'class="'+sn+'"';
                nN = $(child[i-1]).after('').next();
            }
           
            !nN.data('linkage') && nN.change(function(){
                mkSelect(i+1).loadSelect({
                    data: this.value ? opt.url.sprintf({
                        id: this.value,
                        text: this.selectedIndex >= 0 ? this.options[this.selectedIndex].text : ''
                    }) : [],
                    nodata:opt.nodata,
                    required:opt.required,
                    def:opt.seldef[i]||''
                });
            }).data('linkage', true);
           
            return nN;
        }, child = opt.selects||[];
        child.unshift(this);
        var s = mkSelect(0);
        opt.data.length && s.loadSelect({
            data:opt.data,
            def:opt.def
        });
        return this;
    },
    //jquery.printf
    String.prototype.sprintf = function(data, def) {
        return this.replace(/(?:{$)([wd-_]+)(?:})/g, function() {
            return data[arguments[1]]||def||'';
        });
    }
});
 

2,调用示例:
 

代码示例:

    联动测试
   


    In.ready(function(){
        $('#addr_prv').linkage({data:'/company/getCity.html',seldef:[37,567]});
    });

    
 
 

您可能感兴趣的文章:

  • jQuery联动下拉框 jQuery optionTree
  • jQuery实现的多选框多级联动插件
  • Jquery联动下拉菜单实现代码
  • jquery iis7站长之家
  • jQuery select表单提交省市区城市三级联动核心代码
  • JQuery打造省市下拉框联动效果
  • 联动下拉菜单代码(jQuery与JSON实现)
  • jquery+JSON无刷新三级联动的例子
  • asp.net+jquery无刷新三级联动的代码举例
  • jQuery 中国省市两级联动选择附图
  • JQuery转义id中特殊字符的例子
  • jquery检测浏览器名称和版本信息的例子
  • jQuery.proxy向函数中传参的小例子
  • jQuery提交多个表单的小例子
  • jquery获得url参数列表的例子
  • jQuery查看事件内容的小例子
  • jQuery循环array与map小例子
  • jquery 绑定、捕获、拦截回车事件的例子
  • jquery转化Datatable为json数据的例子
  • jquery 获取URL请求参数的小例子
  • jquery 文字上下滚动的小例子
  • jquery链式操作、链式写法的小例子
  • jquery hide方法隐藏元素的例子
  • jquery判断浏览器后退时弹出消息的例子
  • jQuery为checkbox、radio赋值的例子
  • jquery隐藏标签、显示标签的例子
  • JQuery checkbox全选的小例子
  • jQuery判断checkbox是否选中的小例子
  • jQuery元素属性attr设置多个键值的例子
  • jQuery 随机展示图片的例子
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jquery下拉select控件操作方法分享(jquery操作select)
  • Cookie操作插件 jQuery.Cookie
  • 利用js(jquery)操作Cookie的方法说明
  • jQuery操作select option选项(增加 删除 修改)
  • jquery常用操作小结
  • JQuery操作DOM的笔记
  • jquery链式操作的正确使用方法
  • jQuery操作select下拉框的text值和value值的方法
  • jquery加载完iframe的内容后才进行下一步操作的实现方法
  • jquery操作单选框radio的例子
  • 使用jquery实现IE下按backspace相当于返回操作
  • jquery cookie插件用法 jquery操作cookie的例子
  • 解决jquery操作checkbox火狐下第二次无法勾选问题
  • jquery操作checkbox示例分享
  • Jquery操作radio的小例子
  • jquery操作checkbox实现全选和取消全选
  • Jquery操作html标签及动态添加验证的例子
  • Jquery操作radio的简单实例
  • jQuery 操作下拉列表框的代码举例
  • JQuery操作class属性实现按钮开关效果的例子
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3