<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>
<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>
