Mootools 扩展select控件

/* 
 * Descript_CN: 提供对Select控件的options的操作
 * Descript_EN: Offer some operations for select options
 * {Array} arr 选项值设置 格式:[{text:'北京',value:'010'},{text:'上海', value:'020',selected:true}] 当value没定义的时候,value=text
 */ 
Element.Properties.htmlOptions = {
    get: function(){
				if(this.get('tag')!='select') return null;
				var ops = this.getElements('option');
				var arr = ops.map(function(item,index){
					var op = {
						text: item.text,
						value: $pick(item.value,item.text),
						selected: $pick(item.selected,false)
					};
					return op;
				});
        return arr;
    },
    set: function(arr){
			if(this.get('tag')!='select') return this;
			//移除旧的options
			this.getElements('option').destroy();
			//生成新的options
			var ops = arr.map(function(item,index){
				var op = new Element('option',{
                                                       text: item.text,
                                                       value: $pick(item.value,item.text),
                                                       selected: $pick(item.selected,false)
														 });
				//console.log(index,op,op.get('html'));
				return(op);
			});
			//添加
			this.adopt(ops);
			return this;
    },
		erase: function() {
			if(this.get('tag')!='select') return null;
			this.getElements('option').destroy();
			return this;
		}
};


用法:
var data = [
		{text:'任选',value:''},
		{text:'bsc1',value:'bsc1'},
		{text:'bsc2'},
		{text:'bsc21',value:'bsc21',selected:true},
		{text:'bsc212',value:'bsc212'}
	   ];
$('mySelect').set('htmlOptions',data);

你可能感兴趣的:(html,mootools)