jquery select 插件

最新推荐文章于 2025-06-19 09:27:46 发布

淡淡的云彩恋歌

最新推荐文章于 2025-06-19 09:27:46 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：封装的库文章标签： select 插件扩展

本文链接：https://blog.csdn.net/qq_34285828/article/details/53334356

封装的库专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何通过 jQuery 扩展 combobox 插件，包括 class 的定义方式及 JS 实现代码。提供了完整的实现方法，包括数据加载、事件绑定等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

扩展jquery的combobx的插件方法

class的定义方式：

<select id="select" class="combobox" data-options="valueField:'id',textField:'text'"></select>
<select name="" id="" class="combobox" data-options="valueField:'id',textField:'text',url:'demo.do'"></select>

js定义:

$("#select").combobox({
				data:[
					{value:1,text:'极值1'},
					{value:2,text:'极值2'},
					{value:3,text:'极值3'},
					{value:4,text:'极值4'},
					{value:5,text:'极值5'},
					{value:6,text:'极值6'}
				]
				// onChange:function (e) {
				// 	console.log(e);
				// }
			});

整个js的实现代码

(function($){


	//定义jquery方法扩展的combobox的方法
	$.fn.combobox = function(options,param){
		console.log(this);
		if(typeof options == 'string'){
			return $.fn.combobox.method[options]($(this),param);
		}

		//扩张调用的时传递过来的参数
		options = $.extend({}, $.fn.combobox.defaults, options || {});

		//添加默认值
		var target = $(this);
		target.attr("valueField",options.valueField).attr('textField',options.textField);
		target.empty();
		var option = $('<option></option>');
		option.attr('value','');
		option.text(options.placehodler);
		target.append(option);

		//判断用户传递过来的参数中是否包含data数据
		if(options.data){
			init(target,options.data);
		}else{
			options.onBeforeLoad.call(target,options.param);
			if(!options.url){return}
			$.getJSON(options.url,options.param,function(data){
				init(target,data);
			})
		}


		//初始化数据
		function init(target,data){
			$.each(data,function(i,item){
				var option = $('<option></option>');
				option.attr('value', item[options.valueField]);
                option.text(item[options.textField]);
                target.append(option);
			});
			if(options.onLoadSuccess){
				options.onLoadSuccess.call(target)
			}
		}

		target.unbind("change");
		target.on("change",function(e){
			if(options.onChange){
				return options.onChange(target.val())
			}
		});
	};


	//如果传递过来的是字符串代表的是调用方法
	$.fn.combobox.method = {
		getValue:function(jq){
			return jq.val();
		},
		setValue:function(jq,param){
			jq.val(param);
		},
		load:function(jq,url){
			$.getJSON(url, function (data) {
                jq.empty();
                var option = $('<option></option>');
                option.attr('value', '');
                option.text('请选择');
                jq.append(option);
                $.each(data, function (i, item) {
                    var option = $('<option></option>');
                    option.attr('value', item[jq.attr('valuefield')]);
                    option.text(item[jq.attr('textfield')]);
                    jq.append(option);
                });
            });
		}
	};
	
	//默认的参数
	$.fn.combobox.defaults = {
		url:null,
		param:null,
		data:null,
		valueField:'value',
		textField:'text',
		placehodler:'请选择',
		onBeforeLoad:function(param){},
		onLoadSuccess:function(){},
		onChange:function(value){}
	};

	//扩张jq方法
	$.fn.arryToObject = function(arr,string){
		var obj = {},
			arrItem = '';

		$.each(arr,function(i,item){
			arrItem = item.split(string);
			obj[arrItem[0]] = arrItem[1].replace(/\'/g,'');
		});
		return obj;
	};

	//判断是否有class定义
	$(document).ready(function($) {
		
		var $combobox = $('.combobox'),
			$This = null,
			opt = '',
			aAttr = [],
			param = null;

		for(var i = 0;i < $combobox.length;i++){
			$This = $($combobox[i]);
			opt = $This.attr('data-options');
			if(!opt){return false}

			aAttr = opt.split(',');
			param = $.fn.arryToObject(aAttr,':');
			$This.combobox(param);
		}
	});
})(jQuery);

添加嘞class的封装

http://www.cnblogs.com/landeanfen/p/5124542.html?utm_source=tuicool&utm_medium=referral