우리는 <를 관리하는 방법을 이해할 것입니다 선택하다 > 옵션 자바스크립트 이 튜토리얼에서는.
HTML 선택 옵션
옵션을 사용하면 옵션 목록을 쉽게 만들 수 있습니다. 이를 통해 우리는 하나 또는 둘 이상의 옵션을 선택할 수 있습니다. 옵션을 구성하기 위해 및 요소를 사용합니다.
예를 들어:
Red Yellow Green Blue
이 옵션을 사용하면 위에서 언급한 옵션을 한 번에 하나씩 선택할 수 있습니다.
둘 이상의 선택을 원할 경우 <에 속성을 포함할 수 있습니다. 다수의 > 아래 요소:
자바는 인스턴스입니다
Red Yellow Green Blue
HTMLSelectElement 유형
JavaScript의 옵션과 상호 작용하기 위해 HTMLSelectElement 유형을 사용합니다.
HTMLSelectElement 유형에는 다음과 같은 유용한 속성이 포함되어 있습니다.
selectedIndex 속성
우리는 다음과 같은 DOM API를 적용합니다. 쿼리선택기() 또는 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 속성을 포함합니다.
- 선택 상자의 값 속성은 옵션을 선택한 경우 선택한 옵션의 텍스트가 되며 값 속성을 포함하지 않습니다.
- 선택 상자의 값 속성은 두 개 이상의 옵션을 선택한 경우 지난 두 규칙에 대해 처음 선택한 옵션에서 파생됩니다.
아래 예를 고려하십시오.
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); }; 위의 예에서:
- 초기 옵션을 선택하면 요소의 값 속성이 비어 있습니다.
- 마지막 옵션을 선택할 때 선택한 옵션에 값 속성이 포함되어 있지 않기 때문에 선택 상자의 값 속성은 Ember.js가 됩니다.
- 세 번째 또는 두 번째 옵션을 선택하면 값 속성은 '1' 또는 '2'가 됩니다.
HTMLOptionElement 유형
HTMLOptionElement 유형은 JavaScript의 요소를 보여줍니다.
이 유형에는 다음 속성이 포함되어 있습니다.
색인- 옵션 그룹 내 옵션의 인덱스입니다.
선택된- 옵션을 선택하면 참값을 반환합니다. 옵션을 선택하기 위해 selected 속성을 true로 설정했습니다.
텍스트- 옵션의 텍스트를 반환합니다.
값- HTML의 값 속성을 반환합니다.
구성 요소에는 컬렉션 옵션에 액세스할 수 있도록 허용하는 옵션 속성이 포함되어 있습니다.
selectBox.options
예를 들어 두 번째 옵션의 값과 텍스트에 액세스하려면 다음을 사용합니다.
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)
그리고 옵션의 텍스트 속성을 얻으려면 아래와 같이 map() 메서드와 함께 filter() 메서드의 결과를 연결할 수 있습니다.
.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;>