Mootools 扩展select控件

最新推荐文章于 2021-02-23 22:54:50 发布

最新推荐文章于 2021-02-23 22:54:50 发布 · 237 阅读

文章标签：

#Mootools #HTML

Javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种操作HTML中Select控件选项的方法，包括获取当前选项、设置新选项及清除所有选项的功能。提供了详细的实现代码，展示了如何通过JavaScript动态管理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);