画像一覧 
2009年03月23日
セレクトボックスをinnerHTMLで入れ替える
沖縄のisoです。
簡単なJavaScriptでセレクトボックスの中身を入れ替える例を紹介し
ます。(PCからご覧ください)
サンプルは複数選択できるセレクトボックスです。
変更ボタンをクリックすると一度だけ中身が入れ替わります。
（送信ボタンは動作しません）
簡単なJavaScriptでセレクトボックスの中身を入れ替える例を紹介し
ます。(PCからご覧ください)
サンプルは複数選択できるセレクトボックスです。
変更ボタンをクリックすると一度だけ中身が入れ替わります。
（送信ボタンは動作しません）
<div>タグで囲んだ部分に対して、innerHTMLを使って入れ替
えるのが手っ取り早くて簡単です。<div>タグにはidを付けます。
（赤字）
HTMLソース
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<script type="text/javascript">
function change(){
<!--
var str = '';
str += '<select name=\"a1[]\" multiple size=\"3\">';
str += '<option value=\"1\">野球</option>';
str += '<option value=\"2\">水泳</option>';
str += '<option value=\"3\">ゴルフ</option>';
str += '</select>';
document.getElementById('test').innerHTML = str;
//-->
}
</script>
</head>
<body>
<form>
<div id="test">
<select name="a1[]" multiple size="3">
<option value="1">りんご</option>
<option value="2">みかん</option>
<option value="3">バナナ</option>
</select>
</div>
<input type="button" onClick="change();" value="変更">
<input type="submit" value="送信">
</form>
</body>
</html>
JavaScriptの部分を以下のよう書いても動きます。
この場合、<select>タグにidを付けます。（赤字）
<script type="text/javascript">
function change(){
<!--
var obj = document.getElementById("test2");
obj.options.length = 0;
obj.options[obj.options.length] = new Option('野球', '1');
obj.options[obj.options.length] = new Option('水泳', '2');
obj.options[obj.options.length] = new Option('ゴルフ', '3');
//-->
</script>
<select name="a1[]" id="test2" multiple size="3">
<option value="1">りんご</option>
<option value="2">みかん</option>
<option value="3">バナナ</option>
</select>
Posted by シーポイントシステム開発 at 19:30
この記事へのコメント
innerTextってのもあるんですね。
Posted by 通りすがり at 2009年04月01日 17:09