使用JavaScript为将对应值设置成页面默认选项

最近要自己写一些站点，所以平时不碰的前端技术也要接触了。

本文主要讲述jsp中关于radio和select默认选中设置的问题。

 

1、select

比较机械的办法是用 c:if标签判断字段对应值来选择性输出。说他机械是因为若是几十个选项的话，可能要写几十次选项。

下面用js来实现。利用页面的隐藏标签存储后台的值，然后在js中dom取得隐藏标签的值，再设置为select的选项。

这是HTML中的select：

	<input type="hidden" id="cdvalue" value="${comBase.comDeposit}" />
	<SELECT name="comDeposit" id="comDeposit">
		<OPTION value="-1">
			根据公司性质填写
		</OPTION>
		<OPTION value="1">
			企业法人；
		</OPTION>
		<OPTION value="2">
			非法人企业；
		</OPTION>
		<OPTION value="3">
			机关；
		</OPTION>
	</SELECT>

这是对应js中的方法，记得要在body中onload触发:

 

function checkselected() {
	var selects = document.getElementById('comDeposit');
	var selected = document.getElementById('cdvalue').value;
	if (selected === undefined || selected === null || selected === "") {
		return false;
	}
	for ( var i = 0; i < selects.options.length; i++) {
		if (selects.options[i].value === selected) {
			selects.options[i].selected = true;
			return true;
			break;
		}
	}
}

 

2、radio

正常的话，同理，页面设置一个隐藏值，然后通过js循环赋值。

 

function checkradio() {
	var radio_oj = document.getElementById('legalOwner');
	var aValue = document.getElementById('lovalue').value;
	alert(radio_oj.length);
	alert(aValue);
	for ( var i = 0; i < radio_oj.length; i++) 
	{
		alert(radio_oj[i].value);
		if (radio_oj[i].value === aValue)
		{
			radio_oj[i].checked = true; 
			break; 
		}
	}
}

 

不过这里有个需要注意的地方，radio的length只在不多于两个选项的时候，值为undefined，也就是说如果只有两个选项的话，是不能用隐藏值方法通过循环赋值的。这时候用判断赋值法倒是也不麻烦，如下：

 

						<c:if test="${comBase.legalOwner==0}">
							<input type="radio" id="legalOwner" name="legalOwner" value="0"
								checked="checked" />
						法定代表
						<input type="radio" id="comOwner" name="legalOwner" value="1" />
						单位法定负责人
						</c:if>
						<c:if test="${comBase.legalOwner==1}">
							<input type="radio" id="legalOwner" name="legalOwner" value="0" />
						法定代表
						<input type="radio" id="comOwner" name="legalOwner" value="1"
								checked="checked" />
						单位法定负责人
						</c:if>

 

用原生的js写是挺麻烦╮(╯_╰)╭，js中对于el表达式的支持不是很好。