files/ja/web/api/htmloptionelement/option/index.html


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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

---
title: Option()
slug: Web/API/HTMLOptionElement/Option
tags:
  - API
  - Constructor
  - HTML DOM
  - HTMLOptionElement
  - NeedsBrowserCompatibility
  - NeedsContent
  - NeedsExample
  - NeedsSpecTable
translation_of: Web/API/HTMLOptionElement/Option
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>Option()</code></strong> コンストラクターは、新しい {{domxref("HTMLOptionElement")}} を生成します。</p>

<h2 id="Syntax">構文</h2>

<pre
  class="brush: js">var <em>optionElementReference</em> = new Option(<em>text</em>, <em>value</em>, <em>defaultSelected</em>, <em>selected</em>);</pre>

<h3 id="Parameters">引数</h3>

<dl>
  <dt><code>text</code> {{optional_inline}}</dt>
  <dd>{{domxref("DOMString")}} で、要素の内容、すなわち表示するテキストを表します。これが指定されていない場合は、 "" (空文字列) が既定値として使用されます。</dd>
  <dt><code>value</code> {{optional_inline}}</dt>
  <dd>{{domxref("DOMString")}} で、この {{domxref("HTMLOptionElement")}} の値、すなわち対応する {{htmlelement("option")}} 要素の value 属性を表します。指定されなかった場合は、 text の値が value、例えば、フォームがサーバーへ送信されるときの {{htmlelement("select")}} 要素の値として使用されます。</dd>
  <dt><code>defaultSelected</code> {{optional_inline}}</dt>
  <dd><code>true</code> または <code>false</code> のどちらかの値で、 {{htmlattrxref("selected", "option")}} 属性の値を設定するものです。すなわち、ページが最初に読み込まれたときに、この {{htmlelement("option")}} が {{htmlelement("select")}} 要素で選択される既定値になるようにします。これが指定されていない場合は、既定値の false が使用されます。なお、 true を指定しても、その選択肢が selected になっていない場合は、 selected にはなりません。</dd>
  <dt><code>selected</code> {{optional_inline}}</dt>
  <dd><code>true</code> または <code>false</code> のどちらかの値で、その選択肢の選択状態を設定します。既定値は false (未選択) です。省略された場合、 defaultSelected 引数が true であっても、その選択肢は選択されません。</dd>
</dl>

<h2 id="Examples">例</h2>

<h3 id="Just_add_new_options">単に新しい選択肢を追加する</h3>

<pre class="brush: js"> /* 以下の HTML があると想定する
&lt;select id='s'&gt;

&lt;/select&gt;
*/

var s = document.getElementById('s');
var options = [Four, Five, Six];

options.forEach(function(element,key) {
    s[key] = new Option(element,key);
});
</pre>

<h3 id="Append_options_with_different_parameters">様々な引数で選択肢を追加する</h3>

<pre class="brush: js">/* 以下の HTML があると想定する
&lt;select id=&quot;s&quot;&gt;
    &lt;option&gt;First&lt;/option&gt;
    &lt;option&gt;Second&lt;/option&gt;
    &lt;option&gt;Third&lt;/option&gt;
&lt;/select&gt;
*/

var s = document.getElementById('s');
var options = [ 'zero', 'one', 'two' ];

options.forEach(function(element, key) {
  if (element == 'zero') {
    s[s.options.length] = new Option(element, s.options.length, false, false);
  }
  if (element == 'one') {
    s[s.options.length] = new Option(element, s.options.length, true, false); // &quot;selected&quot; 属性を追加する
  }
  if (element == 'two') {
    s[s.options.length] = new Option(element, s.options.length, false, true); // &quot;view&quot; の中で選択されるだけ
  }
});

/* 結果
&lt;select id=&quot;s&quot;&gt;
  &lt;option value=&quot;0&quot;&gt;zero&lt;/option&gt;
  &lt;option value=&quot;1&quot; selected=&quot;&quot;&gt;one&lt;/option&gt;
  &lt;option value=&quot;2&quot;&gt;two&lt;/option&gt; // ユーザーにはこれが 'selected' に見える
&lt;/select&gt;
*/</pre>

<h2 id="Specifications">仕様書</h2>

<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">仕様書</th>
    </tr>
    <tr>
      <td>{{SpecName('HTML WHATWG','#dom-option','Option()')}}</td>
    </tr>
  </tbody>
</table>