わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。

<select>タグの中の<option>タグの情報を取得する

<option>タグの数を取得

<select>タグ中の<option>タグの数は、'select'エレメントの'length'属性に格納されています。

<select>タグの中の<option>タグの情報を取得する

<select>タグ中の<option>タグの情報数は、'select'エレメントの'options[]'配列の中にoptionエレメントが格納されています。

<select>タグ中の<option>タグの情報を取得する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" language="javascript">
<!--
function OnLoad()
{
    var result = "";
 
    // selectエレメント取得
    var elmSelect = document.getElementById( "id_select" );
 
    // optionタグの数を取得
    var length = elmSelect.length;
 
    // optionタグの情報を取得
    for ( var i = 0; i < length; i++ ) {
 
        // optionエレメント取得
        var elmOption = elmSelect.options[ i ];
 
        // value属性を取得
        var value = elmOption.value;
 
        // valueを表示
        result += "[ " + i + " ] value = " + value + "<br/>";
    }
 
    // 結果の表示
    document.getElementById( "id_result" ).innerHTML = result;
}
// -->
</script>
</head>
<body onload="OnLoad()">
<h1>&lt;select&gt;タグの中の&lt;option&gt;タグの情報を取得する</h1>
<select id="id_select">
<option value="item1">アイテム1</option>
<option value="item2">アイテム2</option>
<option value="item3">アイテム3</option>
<option value="item4">アイテム4</option>
<option value="item5">アイテム5</option>
</select>
 
<h2>実行結果</h2>
<div id="id_result">
</div>
</body>
</html>

実行結果

[ 0 ] value = item1
[ 1 ] value = item2
[ 2 ] value = item3
[ 3 ] value = item4
[ 4 ] value = item5






わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。