Dapatkan indeks dropdown yang dipilih dalam javascript

Question

Pada artikel sebelumnya saya menjelaskan Cara menghapus item dari DropDownList (atau) Pilih di Java Script, Cara menghapus item dari DropDownList (atau) Pilih di jQuery, dan Cara mendapatkan indeks yang dipilih dari DropDownList (atau) Pilih di Java Script. Sekarang saya akan menjelaskan cara mendapatkan indeks yang dipilih dari DropDownList (atau) Pilih di jQuery

Table of Contents Show

Bagaimana Cara Mendapatkan/Mengambil Nilai yang Dipilih dari Dropdown di JavaScript?
Metode 1. Dapatkan/Ambil Nilai yang Dipilih dari Dropdown di JavaScript Menggunakan Properti nilai
Metode 2. Ambil Nilai yang Dipilih dari Dropdown di JavaScript Menggunakan Properti "selectedIndex".
Bagaimana cara mengatur nilai dropdown yang dipilih dalam JavaScript menggunakan indeks?
Bagaimana cara mendapatkan nilai yang dipilih dari dropdown dinamis?
Bagaimana cara mendapatkan teks yang dipilih dari dropdown di JavaScript?
Bagaimana cara memilih nilai yang dipilih dalam dropdown?

Dapatkan indeks yang dipilih dari DropDownList (atau) Pilih di jQuery

Kita bisa mendapatkan indeks yang dipilih dari DropDownList (atau) Pilih dengan menggunakan skrip berikut

Naskah

var i = $('#ddlRole option:selected').index();
alert('Selected Index is: ' + i);

Anda juga dapat menemukan contoh lengkap seperti yang ditunjukkan di bawah ini

Kode Sumber Lengkap



    Get selected index from DropDown in Java Script and jQuery

_

Keluaran

Pada contoh di atas, Anda akan melihat peran Admin dipilih. Saat kami mengeklik GetIndex itu menunjukkan indeks masing-masing untuk peran Admin. Indeks akan dimulai dari nol. Saya. e. , Indeks yang dipilih Admin adalah 2

Catatan

Saat bekerja dengan jQuery, referensi file perpustakaan jQuery adalah wajib. Dalam contoh di atas, Anda akan melihat referensi jquery-1.4.1.min.js, ditambahkan di header

Dalam JavaScript, kita sering menjumpai halaman web yang ramah pengguna yang menyertakan kuesioner atau formulir untuk mendapatkan nilai dari satu atau beberapa opsi yang dipilih. Selain itu, saat menangani halaman web berbasis kuis, kami ingin memberi tahu pengguna tentang status jawaban yang diberikan dengan nilai (Benar, Salah). Dalam kasus seperti itu, mengambil nilai yang dipilih dari Dropdown sangat membantu dalam memberikan kejelasan dan menghemat waktu pengguna.

Artikel ini akan memandu Anda untuk mengambil nilai yang dipilih dari daftar Dropdown di JavaScript

Untuk mengambil Nilai yang Dipilih dari Dropdown di JavaScript, Anda dapat menggunakan

- properti “nilai”.
- properti "selectedIndex".

Kami sekarang akan melalui masing-masing pendekatan yang disebutkan satu per satu

Properti "nilai" mengembalikan atribut nilai dari bidang teks. Kami akan menggunakan metode ini untuk mendapatkan opsi yang dipilih dari daftar dropdown dan menampilkan nilainya

Sintaksis

pilihElemen. nilai

Di sini, properti “nilai” akan mengembalikan nilai tertentu yang dipilih dari daftar tarik-turun

Mari kita lihat contoh berikut untuk pemahaman konsep yang lebih baik

Contoh

In this example, we will specify the id named “select” and insert the option values to be selected in the dropdown list. These option values will be placed within the “

Sekarang, kami akan menyertakan tombol dengan acara "onclick". Ini akan bekerja sedemikian rupa sehingga ketika tombol dengan nilai "Periksa opsi" ditekan, fungsi "pilihValue ()" akan dipicu

< p > Pilih jenis kelamin dari daftar tarik-turun yang diberikan.
<pilih id = "select">
< opsi nilai = "Male">Maleoption>
< opsi nilai = "Female">Femaleoption>
pilih> p>
< p > Nilai Gender yang dipilih adalah.
< rentang kelas = "output">span>
p >p>
< tombol klik = "selectValue()"> Check option button>

Selanjutnya, kita akan mendeklarasikan sebuah fungsi bernama “selectValue()”. Di sini, kita akan menggunakan “document. querySelector()” untuk mengakses id dari menu drop-down yang dibuat. Setelah itu, kita akan mendapatkan nilai gender yang dipilih dari daftar dropdown menggunakan properti “nilai”. Terakhir, properti "textContent" akan mengembalikan konten teks dari nilai yang dipilih dan menampilkannya

< skrip ketik = "text/javascript">
fungsi nilaipilih () {
pilih = dokumen. querySelector ('#select') ;
keluaran = pilih. nilai;
dokumen. querySelector ('. keluaran') . textContent= keluaran;
}
skrip >script>

Output dari implementasi di atas akan menghasilkan sebagai berikut

The “option” property returns a collection of all

Sintaksis

pilih. opsi [ pilih. indeks terpilih ] . nilai

Sintaks yang diberikan di atas akan membantu dalam mengambil nilai opsi menu dropdown yang dipilih menggunakan indeksnya

Lihatlah contoh berikut untuk demonstrasi

Contoh

Kami sekarang akan menggunakan kode HTML yang sama yang diberikan pada contoh sebelumnya dan membuat beberapa perubahan pada kode JavaScript. Untuk melakukannya, kita akan mendefinisikan fungsi "selectValue()" dan mengakses id yang ditetapkan dari menu dropdown bernama "select" dengan bantuan dokumen. metode querySelector(). Setelah itu, kita akan menggunakan properti “options” yang dikombinasikan dengan properti lain, termasuk “selectedIndex” untuk mengambil nilai dari opsi yang dipilih

Terakhir, properti "textContent" akan digunakan dalam metode ini untuk mengembalikan konten teks dari nilai yang dipilih dan menampilkan nilai yang sesuai

< skrip ketik = "text/javascript">
fungsi nilaipilih () {
pilih = dokumen. querySelector ('#select') ;
keluaran = pilih. opsi [ pilih. indeks terpilih ] . nilai;
dokumen. querySelector ('. keluaran') . textContent= keluaran;
}
skrip >script>

Keluaran

Kami telah menyediakan metode termudah untuk mengambil nilai yang dipilih dari Dropdown di JavaScript

Kesimpulan

Untuk mendapatkan/mengambil nilai yang dipilih dari Dropdown di JavaScript, terapkan properti "nilai" untuk mendapatkan nilai item yang dipilih dari daftar dropdown dan properti "opsi" bersama dengan properti "selectedIndex" untuk mendapatkan serangkaian opsi dan mendapatkan nilainya . Tulisan ini telah menjelaskan metode untuk mendapatkan/mengambil nilai yang dipilih dari dropdown di JavaScript

change() or . trigger("change") method after setting the value. Alternatively, you can use the . prop() method to set the selectedIndex property which reflects the index of the selected

Dapatkan nilai yang dipilih dari tarik-turun dinamis (opsi dihasilkan oleh javascript ke ID) .

var mata pelajaran = dokumen. getElementsByTagName("pilih"). getElementById('selectSubject'). .

var e = dokumen. getElementById("pilihSubjek"); . .

var e = dokumen. getElementById("pilihSubjek");

Dapatkan Dropdown Selected Value menggunakan JavaScript .

fungsi GetMaster1Details()

var value = document. getElementById("<%=ddlMaster1. ClientID%>");.

var getnilai = nilai. opsi[nilai. indeks terpilih]. nilai;

var getteks = nilai. opsi[nilai. indeks terpilih]. .

waspada("nilai. -" +" "+ getvalue + " "+ "Teks. -" +" "+ getteks);

Dapatkan nilai yang dipilih dari daftar dropdown. Kita dapat menggunakan properti value dari kotak pilih untuk mendapatkan nilai yang dipilih dari daftar dropdown. Keluaran HTML. .

Dapatkan nilai dan teks yang dipilih dari daftar dropdown. Jika kita ingin mendapatkan teks opsi yang dipilih, maka kita harus menggunakan properti selectedIndex dari kotak pilih

kode javascript