From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/htmloptionelement/index.html | 129 +++++++++++++++++++++ .../web/api/htmloptionelement/option/index.html | 101 ++++++++++++++++ 2 files changed, 230 insertions(+) create mode 100644 files/pt-br/web/api/htmloptionelement/index.html create mode 100644 files/pt-br/web/api/htmloptionelement/option/index.html (limited to 'files/pt-br/web/api/htmloptionelement') diff --git a/files/pt-br/web/api/htmloptionelement/index.html b/files/pt-br/web/api/htmloptionelement/index.html new file mode 100644 index 0000000000..3ec8c7c27a --- /dev/null +++ b/files/pt-br/web/api/htmloptionelement/index.html @@ -0,0 +1,129 @@ +--- +title: HTMLOptionElement +slug: Web/API/HTMLOptionElement +tags: + - API + - HTML DOM + - Interface + - NeedsNewLayout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLOptionElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLOptionElement interface represents {{HTMLElement("option")}} elements and inherits all classes and methods of the {{domxref("HTMLElement")}} interface.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
defaultSelected{{domxref("Boolean")}}Contains the initial value of the {{htmlattrxref("selected", "option")}} HTML attribute, indicating whether the option is selected by default or not.
disabled{{domxref("Boolean")}}Reflects the value of the {{htmlattrxref("disabled", "option")}} HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an {{HTMLElement("optgroup")}} element that is disabled.
form{{readonlyInline}}{{domxref("HTMLFormElement")}}If the option is a descendent of a {{HTMLElement("select")}} element, then this property has the same value as the form property of the corresponding {{DomXref("HTMLSelectElement")}} object; otherwise, it is null.
index{{readonlyInline}}longThe position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the {{HTMLElement("datalist")}} element, the value is 0.
label{{domxref("DOMString")}}Reflects the value of the {{htmlattrxref("label", "option")}} HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content.
selected{{domxref("Boolean")}}Indicates whether the option is currently selected.
text{{domxref("DOMString")}}Contains the text content of the element.
value{{domxref("DOMString")}}Reflects the value of the {{htmlattrxref("value", "option")}} HTML attribute, if it exists; otherwise reflects value of the {{domxref("Node.textContent")}} property.
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +
+
Option()
+
Is a constructor creating an HTMLOptionElement object. It has four values: the text to display, text, the value associated, value, the value of defaultSelected, and the value of selected. The last three values are optional.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmloptionelement", "HTMLOptionElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}{{Spec2('HTML5 W3C')}}A constructor, Option(), has been added.
+ The form property can be the null value.
{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}{{Spec2('DOM2 HTML')}}The selected property changed its meaning: it now indicates if the option is currently selected and no longer if it was initally selected.
+ The defaultSelected property is no longer read-only.
{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLOptionElement")}}

+ +

See also

+ + diff --git a/files/pt-br/web/api/htmloptionelement/option/index.html b/files/pt-br/web/api/htmloptionelement/option/index.html new file mode 100644 index 0000000000..9027e9b799 --- /dev/null +++ b/files/pt-br/web/api/htmloptionelement/option/index.html @@ -0,0 +1,101 @@ +--- +title: Option() +slug: Web/API/HTMLOptionElement/Option +translation_of: Web/API/HTMLOptionElement/Option +--- +
{{APIRef("HTML DOM")}}
+ +

O construtor Option() cria novos {{domxref("HTMLOptionElement")}}.

+ +

Sintaxe

+ +
var optionElementReference = new Option(text, value, defaultSelected, selected);
+ +

Parâmetros

+ +
+
text {{optional_inline}}
+
Um {{domxref("DOMString")}} representa o conteúdo do elemento, o texto mostrado na tela. Se  o texto não é especificado, o texto padrão "" (texto vazio) é  utilizado.
+
value {{optional_inline}}
+
Um {{domxref("DOMString")}} representa o valor do {{domxref("HTMLOptionElement")}}, i.e. o valor do elemento {{htmlelement("option")}}. Se não especificado, o texto é usado como valor, e.g. o elemento {{htmlelement("select")}} tem seu valor associado quando o formulário é submetido ao servidor.
+
defaultSelected {{optional_inline}}
+
Um {{domxref("Boolean")}} é usado para adicionar o atributo selected, para que este {{htmlelement("option")}} seja mostrado como selecionado no elemento {{htmlelement("select")}} quando a página for carregada. Se não especificado, o estado padrão é não selecionado. Observe que o defaultSelected = true não define a opção como o valor selecionado do elemento {{htmlelement("select")}}.
+
selected {{optional_inline}}
+
Um {{domxref("Boolean")}} é usado para colocar elemento {{htmlelement("option")}} no estado de selecionado; como padrão do elemento tem o estado de não selecionado. Se omitido, mesmo que o parâmetro defaultSelected for verdadeiro, o elemento {{htmlelement("option")}} não é selecionado. 
+
+ +

Examplos

+ +

Adicionando novas tags options

+ +
 /* assumindo que temos este HTML
+<select id='s'>
+
+</select>
+*/
+
+var s = document.getElementById('s');
+var options = [Quatro, Cinco, Seis];
+
+options.forEach(function(elemento, chave) {
+    s.appendChild(new Option(elemento, chave));
+});
+
+ /* Resultado
+<select id='s'>
+    <option value="0">Quatro</option>
+    <option value="1">Cinco</option>
+    <option value="2">Seis</option>
+</select> */
+
+ +

Adicionando options com diferentes parâmetros

+ +
/* assumindo que temos este HTML
+<select id="s">
+    <option>Primeiro</option>
+    <option>Segundo</option>
+    <option>Terceiro</option>
+</select>
+*/
+
+var s = document.getElementById('s');
+var options = [ 'zero', 'um', 'dois' ];
+
+options.forEach(function(elemento, chave) {
+  if (elemento == 'zero') {
+    s[s.options.length] = new Option(elemento, s.options.length, false, false);
+  }
+  if (elemento == 'um') {
+    s[s.options.length] = new Option(elemento, s.options.length, true, false); // Adicionando atributo "selected"
+  }
+  if (elemento == 'dois') {
+    s[s.options.length] = new Option(elemento, s.options.length, false, true); // Apenas irá selecionar a opção na visualização
+  }
+});
+
+/* Resultado
+<select id="s">
+  <option value="0">zero</option>
+  <option value="1" selected="">um</option>
+  <option value="2">dois</option> // O usuário verá esta opção selecionada
+</select>
+*/
+ +

Especificação

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
HTML5
+ The definition of 'Option' in that specification.		Recomendado
-- cgit v1.2.3-54-g00ecf