< の管理方法を理解します。 選択する > のオプション JavaScript このチュートリアルでは。
HTML選択オプション
オプションを使用すると、オプションのリストが簡単になります。これにより、1 つまたは複数のオプションを選択できるようになります。オプションを形成するには と 要素を使用します。
例えば：
Red Yellow Green Blue
このオプションを使用すると、上で説明したオプションを一度に 1 つずつ選択できます。
複数の選択が必要な場合は、属性を < に含めることができます。 複数 > 以下の要素:
配列javaに追加
Red Yellow Green Blue
HTMLSelectElement タイプ
JavaScript でオプションを操作するには、HTMLSelectElement タイプを使用します。
HTMLSelectElement タイプには、次の便利な属性が含まれています。
selectedIndex プロパティ
次のような DOM API を適用します。 querySelector() または getElementById() 。
この例は、以下で説明する選択されたオプションのインデックスを取得する方法を示しています。
JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.selectedIndex); }; 使い方：
- 最初に、querySelector() メソッドを使用して と コンポーネントを選択します。
- その後、クリック イベント リスナーをこのボタンにリンクし、ボタンが押された場合に、alert() メソッドを使用して選択されたインデックスを表示します。
値プロパティ
要素の value プロパティは、その HTML のコンポーネントと複数の属性に依存します。
- オプションが選択されていない場合、選択ボックスの value プロパティは空の文字列になります。
- オプションが選択されており、value 属性が含まれている場合、選択ボックスの value プロパティは、選択したオプションの値になります。
- オプションが選択されていて value 属性が含まれていない場合、選択ボックスの value プロパティは、選択したオプションのテキストになります。
- 選択ボックスの value プロパティは、複数のオプションが選択された場合、過去 2 つのルールに関して最初に選択されたオプションから派生します。
以下の例を考えてみましょう。
JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.value); }; 上記の例では次のようになります。
- 初期オプションを選択した場合、要素の value 属性は空です。
- 最後のオプションを選択した場合、選択されたオプションには value 属性が含まれていないため、選択ボックスの value 属性は Ember.js になります。
- 3 番目または 2 番目のオプションを選択した場合、value 属性は「1」または「2」になります。
HTMLOptionElement 型
HTMLOptionElement タイプは、JavaScript の要素を示します。
この型には次のプロパティが含まれます。
索引- オプションのグループ内のオプションのインデックス。
選択済み- オプションが選択されている場合は true 値を返します。オプションを選択するには、 selected プロパティを true に設定します。
文章- オプションのテキストを返します。
価値- HTMLのvalue属性を返します。
このコンポーネントには、コレクション オプションへのアクセスを許可するオプション属性が含まれています。
selectBox.options
たとえば、2 番目のオプションの値とテキストにアクセスするには、以下を使用します。
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
コンポーネントの選択されたオプションと個々の選択を取得するには、以下のコードを使用します。
let selectOption = selectBox.options [selectBox.selectedIndex];
その後、値とテキストのプロパティを使用して、選択したオプションの値とテキストにアクセスできます。
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
コンポーネントで複数の選択が許可されている場合、どのオプションが選択されているかを決定するために selected 属性を使用できます。
JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (e) => { e.preventDefault(); const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text); alert(selectedValues); }; この例では、 sb.オプション 配列のようなオブジェクトです。したがって、Array オブジェクトと同じ filter() メソッドは含まれません。
配列オブジェクトを通じてこれらのタイプのメソッドを借用するには、call() メソッドを使用します。以下は、選択されたオプションの配列を示します。
[].filter.call(sb.options, option => option.selected)
また、任意のオプションのテキスト属性を取得するには、以下のように、filter() メソッドの結果と map() メソッドを連鎖させることができます。
.map(option => option.text);
for ループを使用して選択されたオプションを取得するには
for ループを使用して、選択されたリスト オプションを反復処理して、どれが選択されるかを決定できます。選択したオプションまたは値への参照を返す関数を記述することができます。以下は、選択したオプションへの参照を示します。
function getSelectedOption(sel) { var opt; for (var i= 0, len= sel.options.length; i<len; i++) { opt="sel.options[i];" if (opt.selected="==" true) break; } return opt; var console.log(opt.value); console.log(opt.text); < pre> <p>This function gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.</p> <h2>Summary</h2> <ul> <li>The component permits us for selecting one or more options. We can include the multiple property to the component for enabling more than one selections.</li> <li>The HTMLOptionElement illustrates the component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.</li> <li>The HTMLSelectElement illustrates the component. We can use the value and selected index for getting the value and index of the chosen option.</li> </ul> <hr></len;>