Разумећемо како да управљамо < изаберите > опција у ЈаваСцрипт у овом туторијалу.
ХТМЛ Изаберите опцију
Опција нам олакшава списак опција. Омогућава нам да изаберемо једну или више опција. Користимо елементе и за формирање опције.
На пример:
Red Yellow Green Blue
Опција нам омогућава да изаберемо једну по једну опцију која је горе поменута.
Ако желимо више од једног избора, можемо укључити атрибут у < вишеструко > елементи испод:
цхар и инт јава
Red Yellow Green Blue
Тип ХТМЛСелецтЕлемент
Користимо тип ХТМЛСелецтЕлемент за интеракцију са опцијом у ЈаваСцрипт-у.
Тип ХТМЛСелецтЕлемент садржи следеће корисне атрибуте:
селецтедИндек својство
Примењујемо ДОМ АПИ као куериСелецтор() или гетЕлементБиИд() .
Пример показује како да добијете индекс изабране опције који је наведен у наставку:
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); }; Како то ради:
- У почетку изаберите компоненте и уз помоћ методе куериСелецтор().
- Након тога повежите слушалац догађаја клика са овим дугметом и прикажите изабрани индекс уз помоћ алерт() методе ако је дугме притиснуто.
вредност имовине
Својство вредности елемента се ослања на компоненту и вишеструки атрибут његовог ХТМЛ-а:
- Својство вредности поља за избор биће празан стринг када ниједна опција није изабрана.
- Својство вредности поља за избор биће вредност изабране опције када је опција изабрана и садржи атрибут вредности.
- Својство вредности поља за избор биће текст изабране опције када је опција изабрана и не садржи атрибут вредности.
- Својство вредности поља за избор ће бити изведено из почетне изабране опције у вези са претходна два правила када је изабрано више од једне опције.
Размотрите следећи пример:
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); }; У овом горњем примеру:
- Атрибут вредности елемента је празан када изаберемо почетну опцију.
- Атрибут вредности поља за избор биће Ембер.јс јер изабрана опција не садржи атрибут вредности када изаберемо последњу опцију.
- Атрибут вредности ће бити '1' или '2' када изаберемо трећу или другу опцију.
Тип ХТМЛОптионЕлемент
Тип ХТМЛОптионЕлемент илуструје елемент у ЈаваСцрипт-у.
Овај тип садржи следећа својства:
Индекс- Индекс опције унутар групе опција.
Изабрано- Враћа тачну вредност ако је опција изабрана. Изабрано својство постављамо на труе за избор опције.
Текст- Враћа текст опције.
вредност- Враћа атрибут вредности ХТМЛ-а.
Компонента садржи атрибут опције који нам омогућава приступ опцијама колекције:
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.call(sb.options, option => option.selected)
А за добијање атрибута текста било које опције, можемо уланчавати резултат филтер() методе заједно са методом мап() као што је доле:
.map(option => option.text);
Да бисте добили изабрану опцију користећи фор петљу
МИ можемо да користимо фор петљу за понављање по изабраним опцијама листе за одређивање која је изабрана. Могла би се описати функција за враћање референце на изабрану опцију или вредност. Доле даје референцу на изабрану опцију:
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;>