オブジェクト参照


  コンボボックスのデータ参照



クライアントの処理で、テキストフィールドの次に重要なコントロールです。
まずは、コンボボックスのデータを取得します。

テキストデータの取得方法が重要です。
obj.getElementsByTagName("OPTION")[nIndex] では、OPTION ダグの ノードオブジェクト
が取得されますが、その中のテキストは OPTION ノードに所属するのでは無く、目に見えない テキストノード
の値となります。その為、.firstChild.nodeValue という参照になっています

但し、OPTION ノードを取得するのに getElementsByTagName を使用してタグ名で取得しているので
必要なコレクションしか取得されない為、選択されたインデックスを使用して取得できます。
もし、これが childeNodes によって取得されていた場合、#text ノードが混ざってしまう為、正しく動作しません

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function ComboData() {

	var i,str="",nIndex,obj;

	str += "value値=";
	// 現在選択されている value 値
	str += document.getElementsByName("combo")[0].value;
	str += "<br>";

	str += "text値=";
	// 現在選択されている text 値
	obj = document.getElementsByName("combo")[0];
	nIndex = obj.selectedIndex;
	// タグ名で取得する為、#text ノードは存在しません
	str += obj.getElementsByTagName("OPTION")[nIndex].firstChild.nodeValue
	str += "<br>";

	document.getElementById("data").innerHTML = str;

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='ComboData()'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="実行" onClick='ComboData()'>

<br><br>
<DIV id="data"></DIV>

</BODY>
</HTML>

<SCRIPT type="text/javascript" for="window" event="onload">

	ComboData();

</SCRIPT>
  

以下は、コンボボックスにデータを追加する例です。
このあたりから、直感的に処理しようとすると、クロスブラウジングが必要になってきますが、
最終行に追加するにあたって、クロスブラウジングしない方法もあります

エレメントにテキストノードを追加するのに、document.createTextNode("文字列") で作成したものを
使用しますが、innerHTML を使用するほうが簡単で、拡張性の高いものとなります。

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function InsertComboData() {

	var newNode1 = document.createElement("OPTION");
	var newNode2 = document.createElement("OPTION");
	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");
	
	alert(targetNodeList.length);

	// 挿入は共通
	targetNode.insertBefore( newNode1, targetNodeList[1] );
	// OPTION から appendChild は IE、Mozilla 共に可能
	newNode1.appendChild( document.createTextNode("デ−タ1.5") )
//	innerHTML のほうが簡単で拡張性が高い
//	newNode1.innerHTML = "デ−タ1.5";
	newNode1.value="1.5"

	// 最後に追加はクロスブラウジング
	if ( document.all ) {
		// SELECT から appendChild は出来ない
		targetNode.options.add( newNode2 );
		newNode2.innerText = "デ−タ9";
		newNode2.value = "9";
	}
	else {
		targetNode.appendChild( newNode2 );
		newNode2.appendChild( document.createTextNode("デ−タ9") );
		newNode2.value="9";
	}

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='alert(this.value)'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="追加" onClick='InsertComboData()'>

</BODY>
</HTML>
  


以下は、クロスブラウジングしない方法です。

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function InsertComboData() {

	var newNode1 = document.createElement("OPTION");
	var newNode2 = document.createElement("OPTION");
	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");
	
	alert(targetNodeList.length);

	// 挿入は共通
	targetNode.insertBefore( newNode1, targetNodeList[1] );
	// OPTION から appendChild は IE、Mozilla 共に可能
	newNode1.appendChild( document.createTextNode("デ−タ1.5") )
	newNode1.value="1.5"

	// クロスブラウジングしない追加処理
	// 最後のノード
	var lastNode = targetNodeList.item( targetNodeList.length - 1 );
	// 最後のノードをコピー ( true は childNodes もコピーする )
	var cloneNode = lastNode.cloneNode( true );
	// 挿入
	targetNode.insertBefore( cloneNode, lastNode );
	// 最後のノードを変更
	lastNode.firstChild.nodeValue = "デ−タ9"
	lastNode.value = "9"

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo" onChange='alert(this.value)'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="追加" onClick='InsertComboData()'>

</BODY>
</HTML>
  

以下は、コンボボックスのリストの削除です。

  
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=shift_jis">
<SCRIPT language="javascript" type="text/javascript">

function RemoveComboData() {

	// SELECT ノード
	var targetNode = document.getElementsByName("combo")[0];
	// OPTION ノードリスト
	var targetNodeList = targetNode.getElementsByTagName("OPTION");

	var i,length = targetNodeList.length;

	for( i = length-1; i >= 0; i-- ) {
		targetNode.removeChild( targetNodeList.item( i ) );
	}

}

</SCRIPT>
</HEAD>
<BODY>

<SELECT name="combo">
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>

<INPUT type="button" value="削除" onClick='RemoveComboData()'>

</BODY>
</HTML>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加




SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 


フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ