diff options
Diffstat (limited to 'files/ko/web/api/htmlselectelement/selectedoptions/index.html')
| -rw-r--r-- | files/ko/web/api/htmlselectelement/selectedoptions/index.html | 123 |
1 files changed, 123 insertions, 0 deletions
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> |