Nasıl yönetileceğini anlayacağız < seçme > seçeneği JavaScript Bu eğitimde.
HTML Seçeneği Seçin
Bir seçenek bize seçenekler listesini kolaylaştırır. Tek veya birden fazla seçeneği tercih etmemizi sağlar. Bir seçenek oluşturmak için ve öğelerini kullanırız.
Örneğin:
Red Yellow Green Blue
Seçenek, yukarıda belirtilen her seferinde bir seçeneği seçmemize izin verir.
Eğer birden fazla seçim istiyorsak <'a niteliği dahil edebiliriz. çoklu > aşağıdaki öğeler:
karakter ve int java
Red Yellow Green Blue
HTMLSelectElement türü
JavaScript'te seçenekle etkileşim kurmak için HTMLSelectElement türünü kullanıyoruz.
HTMLSelectElement türü aşağıdaki yararlı özellikleri içerir:
seçilenIndex özelliği
DOM API'sini şöyle uyguluyoruz sorguSelektör() veya getElementById() .
Örnek, aşağıda belirtilen seçili seçenek endeksinin nasıl elde edileceğini gösterir:
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); }; Nasıl çalışır:
- Başlangıçta, querySelector() yönteminin yardımıyla ve bileşenlerini seçin.
- Daha sonra click olay dinleyicisini bu butona bağlayın ve eğer butona basılmışsa, warning() metodu yardımıyla seçili indeksi görüntüleyin.
değer özelliği
Öğenin value özelliği, HTML'sinin bileşenine ve çoklu niteliğine dayanır:
- Bir seçim kutusunun değer özelliği, hiçbir seçenek seçilmediğinde boş bir dize olacaktır.
- Bir seçim kutusunun değer özelliği, bir seçenek seçildiğinde seçilen seçeneğin değeri olacaktır ve değer özelliğini içerir.
- Bir seçim kutusunun değer özelliği, bir seçenek seçildiğinde ve herhangi bir değer özelliği içermediğinde seçilen seçeneğin metni olacaktır.
- Bir seçim kutusunun değer özelliği, birden fazla seçenek seçildiğinde önceki iki kurala ilişkin ilk seçilen seçenekten türetilecektir.
Aşağıdaki örneği düşünün:
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); }; Yukarıdaki örnekte:
- Başlangıç seçeneğini seçtiğimizde elemanın değer özelliği boştur.
- Son seçeneği seçtiğimizde seçilen seçeneğin herhangi bir değer özelliği içermemesi nedeniyle bir seçim kutusunun değer özelliği Ember.js olacaktır.
- Üçüncü veya ikinci seçeneği seçtiğimizde değer özelliği '1' veya '2' olacaktır.
HTMLOptionElement türü
HTMLOptionElement türü, öğeyi JavaScript'te gösterir.
Bu tür aşağıdaki özellikleri içerir:
Dizin- Seçenek grubu içindeki seçeneğin dizini.
Seçilmiş- Seçenek seçilirse gerçek değeri döndürür. Bir seçeneği seçmek için seçilen özelliği true olarak ayarladık.
Metin- Seçeneğin metnini döndürür.
Değer- HTML'nin değer özelliğini döndürür.
Bileşen, koleksiyon seçeneklerine erişmemize izin veren bir seçenek niteliği içerir:
selectBox.options
Örneğin ikinci seçeneğin değerine ve metnine erişmek için aşağıdakileri kullanırız:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Bileşenin seçili bir seçeneğini bireysel bir seçimle birlikte elde etmek için aşağıdaki kodu kullanırız:
let selectOption = selectBox.options [selectBox.selectedIndex];
Bundan sonra seçilen bir seçeneğin değerine ve metnine değer ve metin özelliklerine göre erişebiliriz:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Bileşen birden fazla seçime izin verdiğinde, hangi seçeneğin seçildiğini belirlemek için seçilen bir özelliği kullanabiliriz:
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); }; Örnekte, sb.seçenek dizi benzeri nesnedir. Bu nedenle Array nesnesiyle aynı filter() yöntemini içermez.
Bu tür yöntemleri bir dizi nesnesi aracılığıyla ödünç almak için bir call() yöntemini kullanırız; aşağıda seçilen seçeneklerin dizisi verilmektedir:
[].filter.call(sb.options, option => option.selected)
Ve herhangi bir seçeneğin text niteliğini elde etmek için, filter() yönteminin sonucunu aşağıdaki gibi bir map() yöntemiyle birlikte zincirleyebiliriz:
.map(option => option.text);
For döngüsünü kullanarak Seçilen Seçeneği almak için
Hangisinin seçildiğini belirlemek amacıyla seçilen liste seçeneklerinin yinelenmesi için for döngüsünü kullanabiliriz. Referansı seçilen bir seçeneğe veya değere döndürmek için bir fonksiyon tanımlanabilir. Aşağıda seçilen bir seçeneğe referans verilmektedir:
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;>