diff options
Diffstat (limited to 'files/ko/web/api/htmlselectelement')
| -rw-r--r-- | files/ko/web/api/htmlselectelement/index.html | 166 | ||||
| -rw-r--r-- | files/ko/web/api/htmlselectelement/selectedoptions/index.html | 123 |
2 files changed, 289 insertions, 0 deletions
diff --git a/files/ko/web/api/htmlselectelement/index.html b/files/ko/web/api/htmlselectelement/index.html new file mode 100644 index 0000000000..967409aadc --- /dev/null +++ b/files/ko/web/api/htmlselectelement/index.html @@ -0,0 +1,166 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +tags: + - API + - HTML DOM + - HTMLSelectElement + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLSelectElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{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="Methods">Methods</h2> + +<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{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="Events">Events</h2> + +<p>Listen to these events using {{domxref("EventTarget/addEventListener", "addEventListener()")}} or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p> + +<dl> + <dt>{{domxref("HTMLElement/input_event", "input")}} event</dt> + <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.</dd> +</dl> + +<h2 id="Example">Example</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 +<select id='s'> + <option>First</option> + <option selected>Second</option> + <option>Third</option> +</select> +*/ + +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><select></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#<select>_element">the example provided</a> in the documentation for the <code>change</code> event for details.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</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="Browser_compatibility">Browser compatibility</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="See_also">See also</h2> + +<ul> + <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li> +</ul> diff --git a/files/ko/web/api/htmlselectelement/selectedoptions/index.html b/files/ko/web/api/htmlselectelement/selectedoptions/index.html new file mode 100644 index 0000000000..da8993f4cf --- /dev/null +++ b/files/ko/web/api/htmlselectelement/selectedoptions/index.html @@ -0,0 +1,123 @@ +--- +title: HTMLSelectElement.selectedOptions +slug: Web/API/HTMLSelectElement/selectedOptions +translation_of: Web/API/HTMLSelectElement/selectedOptions +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <strong>read-only</strong> {{domxref("HTMLSelectElement")}} property <code><strong>selectedOptions</strong></code> contains a list of the {{HTMLElement("option")}} elements contained within the {{HTMLElement("select")}} element that are currently selected. The list of selected options is an {{domxref("HTMLCollection")}} object with one entry per currently selected option.</p> + +<p>An option is considered selected if it has an {{domxref("HTMLOptionElement.selected")}} attribute.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>selectedCollection</em> = <em>HTMLSelectElement</em>.selectedOptions;</pre> + +<h3 id="Value">Value</h3> + +<p>An {{domxref("HTMLCollection")}} which lists every currently selected {{domxref("HTMLOptionElement")}} which is either a child of the {{domxref("HTMLSelectElement")}} or of an {{domxref("HTMLOptGroupElement")}} within the <code><select></code> element.</p> + +<p>In other words, any option contained within the <code><select></code> element may be part of the results, but option groups are not included in the list.</p> + +<p>If no options are currently selected, the collection is empty and returns a {{domxref("HTMLCollection.length", "length")}} of 0.</p> + +<h2 id="Example">Example</h2> + +<p>In this example, a {{HTMLElement("select")}} element with a number of options is used to let the user order various food items.</p> + +<h3 id="HTML">HTML</h3> + +<p>The HTML that creates the selection box and the {{HTMLElement("option")}} elements representing each of the food choices looks like this:</p> + +<pre class="brush: html"><label for="foods">What do you want to eat?</label><br> +<select id="foods" name="foods" size="7" multiple> + <option value="1">Burrito</option> + <option value="2">Cheeseburger</option> + <option value="3">Double Bacon Burger Supreme</option> + <option value="4">Pepperoni Pizza</option> + <option value="5">Taco</option> +</select> +<br> +<button name="order" id="order"> + Order Now +</button> +<p id="output"> +</p></pre> + +<p>The <code><select></code> element is set to allow multiple items to be selected, and it is 7 rows tall. Note also the {{HTMLElement("button")}}, whose role it is to trigger fetching the {{domxref("HTMLCollection")}} of selected elements using the <code>selected</code> property.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<p>The JavaScript code that establishes the event handler for the button, as well as the event handler itself, looks like this:</p> + +<pre class="brush: js">let orderButton = document.getElementById("order"); +let itemList = document.getElementById("foods"); +let outputBox = document.getElementById("output"); + +orderButton.addEventListener("click", function() { + let collection = itemList.selectedOptions; + let output = ""; + + for (let i=0; i<collection.length; i++) { + if (output === "") { + output = "Your order for the following items has been placed: "; + } + output += collection[i].label; + + if (i === (collection.length - 2) && (collection.length < 3)) { + output += " and "; + } else if (i < (collection.length - 2)) { + output += ", "; + } else if (i === (collection.length - 2)) { + output += ", and "; + } + } + + if (output === "") { + output = "You didn't order anything!"; + } + + outputBox.innerHTML = output; +}, false);</pre> + +<p>This script sets up a {{event("click")}} event listener on the "Order Now" button. When clicked, the event handler fetches the list of selected options using <code>selectedOptions</code>, then iterates over the options in the list. A string is constructed to list the ordered items, with logic to build the list using proper English grammar rules (including a {{interwiki("wikipedia", "serial comma")}}).</p> + +<h3 id="Result">Result</h3> + +<p>The resulting content looks like this in action:</p> + +<p>{{EmbedLiveSample("Example", 600, 250)}}</p> + +<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', "form-elements.html#dom-select-selectedoptions", "HTMLSelectElement.selectedOptions")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "forms.html#dom-select-selectedoptions", "HTMLSelectElement.selectedOptions")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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.selectedOptions")}}</p> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>{{SectionOnPage("/en-US/docs/Learn/HTML/Forms/The_native_form_widgets", "Drop-down content")}}</li> +</ul> |