Розберемося, як управляти < вибрати > варіант в JavaScript у цьому посібнику.
HTML Виберіть опцію
Опція полегшує нам список опцій. Це дозволяє нам вибрати один або кілька варіантів. Ми використовуємо елементи і для формування варіанту.
Наприклад:
Red Yellow Green Blue
Параметр дозволяє нам вибирати один варіант за раз, який згадано вище.
Якщо ми бажаємо вибрати кілька, ми можемо включити атрибут до < багаторазовий > елементи нижче:
імпорт сканера java
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(), якщо кнопку натиснуто.
вартість власності
Властивість значення елемента залежить від компонента та атрибута multiple його HTML:
- Властивість значення поля вибору буде порожнім рядком, якщо жоден параметр не вибрано.
- Властивість значення поля вибору буде значенням вибраного параметра, якщо параметр було вибрано та містить атрибут 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); }; У прикладі вище:
- Атрибут value елемента порожній, коли ми вибираємо початковий параметр.
- Атрибутом значення поля вибору буде Ember.js, оскільки вибраний параметр не містить атрибута значення, коли ми вибираємо останній параметр.
- Атрибут значення буде «1» або «2», коли ми виберемо третій або другий варіант.
Тип HTMLOptionElement
Тип HTMLOptionElement ілюструє елемент у JavaScript.
Цей тип містить такі властивості:
Індекс- Індекс опції в групі опцій.
Вибране- Він повертає справжнє значення, якщо вибрано цей параметр. Ми встановлюємо вибрану властивість true для вибору опції.
Текст- Він повертає текст опції.
Значення- Він повертає атрибут значення HTML.
Компонент містить атрибут option, який дозволяє нам отримати доступ до параметрів колекції:
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); }; У прикладі сб.варіант є масивоподібним об’єктом. Отже, він не містить метод 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;>