Ще разберем как да управляваме < изберете > опция в JavaScript в този урок.
HTML Изберете опция
Опция ни улеснява в списъка с опции. Позволява ни да изберем една или повече от една опция. Използваме елементите и за формиране на опция.
Например:
Red Yellow Green Blue
Опцията ни позволява да избираме една по една опция, която е спомената по-горе.
Ако желаем повече от една селекция, можем да включим атрибут към < многократни > елементи по-долу:
говинда
Red Yellow Green Blue
Тип HTMLSelectElement
Използваме типа HTMLSelectElement за взаимодействие с опция в JavaScript.
Типът 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(), ако бутонът е натиснат.
стойностно имущество
Свойството стойност на елемента разчита на компонента и множествения атрибут на неговия HTML:
- Свойството стойност на поле за избор ще бъде празен низ, когато не е избрана опция.
- Свойството стойност на поле за избор ще бъде стойността на избраната опция, когато опция е избрана и съдържа атрибута стойност.
- Свойството стойност на поле за избор ще бъде текстът на избраната опция, когато опция е избрана и не съдържа атрибут стойност.
- Свойството стойност на поле за избор ще бъде извлечено от първоначално избраната опция по отношение на последните две правила, когато са избрани повече от една опция.
Разгледайте примера по-долу:
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.
Този тип съдържа следните свойства:
индекс- Индексът на опцията в групата опции.
избрано- Връща истинска стойност, ако е избрана опцията. Задаваме избраното свойство 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;
Когато компонентът позволява повече от един избор, можем да използваме избран атрибут, за да определим коя опция е избрана:
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.опция е подобен на масив обект. Следователно, той не съдържа метода filter() като обекта Array.
За заемане на тези типове методи чрез обект от масив, ние използваме метод 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;>