initial commit

6 files changed, 718 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlselectelement/add/index.html b/files/zh-cn/web/api/htmlselectelement/add/index.html
new file mode 100644
index 0000000000..dfd9dbcb54
--- /dev/null
+++ b/files/zh-cn/web/api/htmlselectelement/add/index.html
@@ -0,0 +1,168 @@
+---
+title: HTMLSelectElement.add()
+slug: Web/API/HTMLSelectElement/add
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - 参考
+  - 方法
+translation_of: Web/API/HTMLSelectElement/add
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>HTMLSelectElement.add()</strong></code> 方法用于向 <code>select</code> 元素的 <code>option</code> 元素集合中添加一个元素。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>collection</var>.add(item[, before]);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<ul>
+ <li><em>item</em> 是一个 {{domxref("HTMLOptionElement")}} 或 {{domxref("HTMLOptGroupElement")}}</li>
+ <li><em>before</em> 是可选的，是集合中的一个元素或者类型为 <em>long </em>的一个索引，表示上面的 <em>item </em>在此之前插入。如果这个参数是 <code>null</code>（或索引不存在），新元素会添加在集合的末尾。</li>
+</ul>
+
+<h3 id="异常">异常</h3>
+
+<ul>
+ <li>如果传入的 <em>item </em>是 <code>{{domxref("HTMLSelectElement")}}</code> 的祖先元素，<code>HierarchyRequestError</code> 类型的 {{domxref("DOMError")}} 会被抛出。</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="从零开始创建元素">从零开始创建元素</h3>
+
+<pre class="brush: js">var sel = document.createElement("select");
+var opt1 = document.createElement("option");
+var opt2 = document.createElement("option");
+
+opt1.value = "1";
+opt1.text = "Option: Value 1";
+
+opt2.value = "2";
+opt2.text = "Option: Value 2";
+
+sel.add(opt1, null);
+sel.add(opt2, null);
+
+/*
+  概念上与下述代码相同：
+
+  &lt;select&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
+  &lt;/select&gt;
+*/</pre>
+
+<p>before 参数是可选的，因此也可以这样写：</p>
+
+<pre class="brush: js">...
+sel.add(opt1);
+sel.add(opt2);
+...
+</pre>
+
+<h3 id="添加到已存在集合的末尾">添加到已存在集合的末尾</h3>
+
+<pre class="brush: js">var sel = document.getElementById("existingList");
+
+var opt = document.createElement("option");
+opt.value = "3";
+opt.text = "Option: Value 3";
+
+sel.add(opt, null);
+
+/*
+  获取这个已存在的 select 对象：
+
+  &lt;select id="existingList"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
+  &lt;/select&gt;
+
+  将其变成这样：
+
+  &lt;select id="existingList"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
+    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
+  &lt;/select&gt;
+*/
+</pre>
+
+<p>同样，before 参数是可选的，因此也可以这样写：</p>
+
+<pre class="brush:js">...
+sel.add(opt);
+...
+</pre>
+
+<h3 id="插入到已存在的集合中间">插入到已存在的集合中间</h3>
+
+<pre class="brush: js">var sel = document.getElementById("existingList");
+
+var opt = document.createElement("option");
+opt.value = "3";
+opt.text = "Option: Value 3";
+
+sel.add(opt, sel.options[1]);
+
+/*
+  获取这个已存在的 select 对象：
+
+  &lt;select id="existingList"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
+  &lt;/select&gt;
+
+  将其变成这样：
+
+  &lt;select id="existingList"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
+    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
+  &lt;/select&gt;
+*/
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-select-add', 'HTMLSelectElement.add()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-add', 'HTMLSelectElement.add()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName("HTML WHATWG")}} 的一个快照（snapshot）。<br>
+    <code>before</code> 的值为 long 类型，且可选。如果传入的 <code>item</code><em> </em>是 <code>{{domxref("HTMLSelectElement")}}</code> 的祖先元素，<code>HierarchyRequestError</code> 类型的 {{domxref("DOMError")}} 会被抛出。不传入 <code>before</code> 参数时不再抛出异常。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-14493106', 'HTMLSelectElement.add()')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>如果 <code>before</code> 参数不是这个元素的子代，会抛出 NOT_FOUND_ERR 异常。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-14493106', 'HTMLSelectElement.add()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初始定义。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement.add")}}</p>
diff --git a/files/zh-cn/web/api/htmlselectelement/checkvalidity/index.html b/files/zh-cn/web/api/htmlselectelement/checkvalidity/index.html
new file mode 100644
index 0000000000..c413681dd4
--- /dev/null
+++ b/files/zh-cn/web/api/htmlselectelement/checkvalidity/index.html
@@ -0,0 +1,98 @@
+---
+title: HTMLSelectElement.checkValidity()
+slug: Web/API/HTMLSelectElement/checkValidity
+translation_of: Web/API/HTMLSelectElement/checkValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>HTMLSelectElement.checkValidity()</strong></code> 会检查元素是否有任何输入约束条件，并且检查值是否符合约束条件. 如果值是不符合约束条件的, 浏览器就会在该元素上触发一个可以撤销的 {{event("invalid")}} 事件,  然后返回 <code>false</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval  language-html"><code class="language-html">var <em>result</em> = <em>selectElt</em>.checkValidity();</code></pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form validation.</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlselectelement/index.html b/files/zh-cn/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..ee1f8e0bfc
--- /dev/null
+++ b/files/zh-cn/web/api/htmlselectelement/index.html
@@ -0,0 +1,168 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - Select
+  - 参考
+  - 接口
+  - 选择
+translation_of: Web/API/HTMLSelectElement
+---
+<div>
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>HTMLSelectElement</strong></code> 接口表示一个 {{HTMLElement("select")}} HTML 元素。这个元素也通过 {{domxref("HTMLElement")}} 接口从其他 HTML 元素共享所有属性和方法。</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+</div>
+
+<h2 id="属性">属性</h2>
+
+<p><em>这个接口从 {{domxref("HTMLElement")}}，{{domxref("Element")}} 和 {{domxref("Node")}} 继承属性。</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd>
+ <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd>
+ <dt>{{domxref("HTMLSelectElement.length")}}</dt>
+ <dd>An <code>unsigned long</code> The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd>
+ <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.</dd>
+ <dt>{{domxref("HTMLSelectElement.required")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
+ <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.size")}}</dt>
+ <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is <code>true</code>, in which case it is 4.</dd>
+ <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd>
+ <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd>
+ <dt>{{domxref("HTMLSelectElement.value")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form control. Returns the <code>value</code> property of the first selected option element if there is one, otherwise the empty string.</dd>
+ <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>这个接口从 {{domxref("HTMLElement")}}，{{domxref("Element")}} 和 {{domxref("Node")}} 继承属性。</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
+ <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt>
+ <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
+ <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element (and returns <code>false</code>).</dd>
+ <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt>
+ <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
+ <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
+ <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
+ <dd>Removes the element at the specified index from the options collection for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.reportValidity()")}}</dt>
+ <dd>This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element, and returns <code>false</code>; if there are no problems, it returns <code>true</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
+ <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd>
+</dl>
+
+<h2 id="事件">事件</h2>
+
+<p>使用 {{domxref("EventTarget/addEventListener", "addEventListener()")}} 或给下面接口的 <code>on<em>eventname</em></code> 属性分配一个监听程序来监听这些事件：</p>
+
+<dl>
+ <dt>{{domxref("HTMLElement/input_event", "input")}} 事件</dt>
+ <dd>当 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 <code>value</code> 改变时触发该事件。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+&lt;select id='s'&gt;
+    &lt;option&gt;First&lt;/option&gt;
+    &lt;option selected&gt;Second&lt;/option&gt;
+    &lt;option&gt;Third&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+</pre>
+
+<p>A better way to track changes to the user's selection is to watch for the {{domxref("HTMLElement/change_event", "change")}} event to occur on the <code>&lt;select&gt;</code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/API/HTMLElement/change_event#&lt;select>_element">the example provided</a> in the documentation for the <code>change</code> event for details.</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{HTMLElement("select")}} HTML 元素</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlselectelement/remove/index.html b/files/zh-cn/web/api/htmlselectelement/remove/index.html
new file mode 100644
index 0000000000..6cb7046a6e
--- /dev/null
+++ b/files/zh-cn/web/api/htmlselectelement/remove/index.html
@@ -0,0 +1,94 @@
+---
+title: HTMLSelectElement.remove()
+slug: Web/API/HTMLSelectElement/remove
+translation_of: Web/API/HTMLSelectElement/remove
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>HTMLSelectElement.remove()</strong></code> 方法从一个 select 元素中删除指定序数的 option 元素。没有传参时为删除当前元素本身：<a href="/en-US/docs/Web/API/ChildNode/remove">ChildNode.remove()</a>。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>collection</em>.remove(<em>index</em>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<ul>
+ <li><code>index</code><em> </em>是从 option {{ domxref("HTMLOptionElement") }} 集合中要移除元素的序数。如果序数对应的元素不存在，调用这个方法就没有任何效果。</li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">var sel = document.getElementById("existingList");
+sel.remove(1);
+
+/*
+  上面的代码会将下面的 select 元素结构：
+
+  &lt;select id="existingList" name="existingList"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
+    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
+  &lt;/select&gt;
+
+  变成这样：
+
+  &lt;select id="existingList" name="existingList"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
+  &lt;/select&gt;
+*/
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement.remove")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>{{ domxref("ChildNode.remove") }}，当没有参数时 {{ domxref("HTMLSelectElement") }} 调用的是这个方法</li>
+ <li>{{domxref("HTMLSelectElement") }} 实现了这个方法。</li>
+</ul>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>
diff --git a/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html b/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html
new file mode 100644
index 0000000000..90217f241b
--- /dev/null
+++ b/files/zh-cn/web/api/htmlselectelement/selectedindex/index.html
@@ -0,0 +1,80 @@
+---
+title: HTMLSelectElement.selectedIndex
+slug: Web/API/HTMLSelectElement/selectedIndex
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - HTML表单
+  - 参考
+  - 属性
+translation_of: Web/API/HTMLSelectElement/selectedIndex
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>HTMLSelectElement.selectedIndex</strong></code> 是一个长整型数，它反映了被选中的第一个 {{HTMLElement("option")}} 元素的索引值。值为-1时表明没有元素被选中。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <var>index</var> = <var>selectElem</var>.selectedIndex;
+<em>selectElem<code>.selectedIndex = </code>index;</em>
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="p"&gt;selectedIndex: 0&lt;/p&gt;
+
+&lt;select id="select"&gt;
+  &lt;option selected&gt;Option A&lt;/option&gt;
+  &lt;option&gt;Option B&lt;/option&gt;
+  &lt;option&gt;Option C&lt;/option&gt;
+  &lt;option&gt;Option D&lt;/option&gt;
+  &lt;option&gt;Option E&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight[6]">var selectElem = document.getElementById('select')
+var pElem = document.getElementById('p')
+
+// 当有新的&lt;option&gt;元素被选中时
+selectElem.addEventListener('change', function() {
+  var index = selectElem.selectedIndex;
+  // 把index数据添加到p元素中
+  pElem.innerHTML = 'selectedIndex: ' + index;
+})</pre>
+
+<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="80px" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex$samples/Example?revision=1546597" width="200px"></iframe></p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName("HTML WHATWG")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.HTMLSelectElement.selectedIndex")}}</p>
+
+<div></div>
+
+<div id="compat-mobile"></div>
diff --git a/files/zh-cn/web/api/htmlselectelement/setcustomvalidity/index.html b/files/zh-cn/web/api/htmlselectelement/setcustomvalidity/index.html
new file mode 100644
index 0000000000..52d5de0e15
--- /dev/null
+++ b/files/zh-cn/web/api/htmlselectelement/setcustomvalidity/index.html
@@ -0,0 +1,110 @@
+---
+title: HTMLSelectElement.setCustomValidity()
+slug: Web/API/HTMLSelectElement/setCustomValidity
+tags:
+  - HTMLSelectElement.setCustomValidity()
+translation_of: Web/API/HTMLSelectElement/setCustomValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>HTMLSelectElement.setCustomValidity()</strong></code> 方法设置指定的验证消息为选择元素的自定义验证消息。</p>
+
+<p>使用空字符串来表示该元素没有自定义的验证错误。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="eval  language-html"><code class="language-html"><em>selectElt</em>.setCustomValidity(<em>string</em>);</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<ul>
+ <li><em>string</em> 将作为错误信息包含到 {{domxref("DOMString")}} 之中。</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Edge</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="查看更多">查看更多</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form validation.</a></li>
+</ul>