Jquery映射下拉框和单选框

最新推荐文章于 2022-06-01 18:01:52 发布

原创最新推荐文章于 2022-06-01 18:01:52 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

介绍了一个简化表单映射的组件，支持下拉框和单选框的动态生成与配置，提高了开发效率。

不再Struts2的框架下下拉框和单选框的映射是非常复杂和麻烦的，这里一个组件，由Vososo站长开发调试，现在免费发布给大家使用，欢迎反馈。
render.js 代码如下:

/*映射 ERadio 脚本
用法:
1、在页面reload的时候配置
jQuery(function(){
	renderERadio();
});
2、在页面中配置
<span>{"val":"男","name":"student","vals":["女","男"]}</span>
<span>{"val":"-1","name":"teacher","vals":["1","0","-1"],"radioTxts":["有","无","其他"]}</span>
即可在<span></span>内部生成
<input type="radio" .... /> radioTxt

配置参数:
val : radio 的值
name : radio 的 name 属性
vals : radio 数组值
radioTxts : 可选参数 ,默认等于 vals
*/
function renderERadio(){
	jQuery.each(jQuery(".eRadio"),function(){
		vv =  jQuery.parseJSON(jQuery(this).html());
		if(vv.radioTxts==undefined){
			vv.radioTxts=vv.vals;
		}else if(vv.vals==undefined){
			vv.vals=vv.radioTxts;
		}
		var html = "";
		jQuery.each(vv.vals,function(i,n){
			if(vv.val==vv.vals[i]){
				html += '<input type="radio" name="'+vv.name+'" value="'+vv.vals[i]+'" checked="true" />'+vv.radioTxts[i];
			}else{
				html += '<input type="radio" name="'+vv.name+'" value="'+vv.vals[i]+'" />'+vv.radioTxts[i];
			}
		});
		jQuery(this).html(html);
	});
}
/*映射 eSelect 脚本
用法通 eRadio:
1、在页面reload的时候配置
jQuery(function(){
	renderESelect();
});
2、在页面中配置
<span>{"val":"男","name":"student","vals":["女","男"]}</span>
或者
<span>{"val":"-1","name":"teacher","vals":["1","0","-1"],"optionVals":["有","无","其他"]}</span>

即可在<span></span>内部生成
<select name="xxx">..optionVal..</select>

配置参数:
val : select 的值
name : select 的 name 属性
vals : select 的数组值
optionVals : 可选参数 ,默认等于 vals
*/
function renderESelect(){
	jQuery.each(jQuery(".eSelect"),function(){
		vv =  jQuery.parseJSON(jQuery(this).html());
		if(vv.optionVals==undefined){
			vv.optionVals=vv.vals;
		}else if(vv.vals==undefined){
			vv.vals=vv.optionVals;
		}
		var html = '<select name="'+vv.name+'">';
		jQuery.each(vv.vals,function(i,n){
			if(vv.val==vv.vals[i]){
				html += '<option value="'+vv.vals[i]+'" selected="true">'+vv.optionVals[i]+'</option>';
			}else{
				html += '<option value="'+vv.vals[i]+'">'+vv.optionVals[i]+'</option>';
			}
		});
		html += '</select>';
		jQuery(this).html(html);
	});
}

演示demo下载地址