使用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表达式的支持不是很好。