HTMLOptionElement.Option() を新規翻訳 (#1166)

2021/04/11 時点の英語版に基づき新規翻訳

1 files changed, 99 insertions, 0 deletions

diff --git a/files/ja/web/api/htmloptionelement/option/index.html b/files/ja/web/api/htmloptionelement/option/index.html
new file mode 100644
index 0000000000..097c789cf7
--- /dev/null
+++ b/files/ja/web/api/htmloptionelement/option/index.html
@@ -0,0 +1,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>