JavaScriptを使用して、対応する値をページのデフォルトオプションに設定します.

2730 ワード

最近は自分でサイトを書くので、普段は触れない先端技術にも触れます.
本稿では、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が2つ以上のオプションしかない場合、値はundefined、つまり2つのオプションしかない場合、非表示値法でループで値を割り当てることはできません.この場合、判断賦値法を用いても面倒ではありません.以下のようにします.
 
						<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式のサポートがあまりよくありません.