Javascript pilih opsi nilai yang dipilih

Untuk mendapatkan nilai yang dipilih dari daftar dropdown, mis. e. option yang dipilih dari elemen select, menggunakan vanilla JavaScript cukup ambil elemen dan baca atribut value

Sebuah pilihan memudahkan kita dalam daftar pilihan. Ini memungkinkan kita untuk memilih satu atau lebih dari satu pilihan. Kami menggunakan elemen untuk membentuk opsi. Misalnya. Opsi memungkinkan kita untuk memilih satu opsi pada satu waktu yang disebutkan di atas

If we wish more than one selections, we can include attribute to elements below: HTMLSelectElement type We use the HTMLSelectElement type for interacting withoption in JavaScript.

Jenis HTMLSelectElement berisi atribut bermanfaat berikut

• selectedIndex- Atribut ini memberikan indeks opsi terpilih berbasis nol. Indeks yang dipilih akan menjadi -1 bila tidak ada opsi yang dipilih. Ketika opsi mengizinkan lebih dari satu kali pemilihan, indeks yang dipilih memberikan nilai opsi pertama. nilai- Atribut nilai memberikan atribut nilai dari komponen opsi yang dipilih awalnya jika ada satu, jika tidak, itu akan mengembalikan string kosong. multipel- Atribut multipel memberikan nilai benar ketika komponen mengizinkan lebih dari satu pilihan. Itu sama dengan beberapa atribut

properti indeks yang dipilih

Kami menerapkan API DOM seperti querySelector() atau getElementById()

Contoh menunjukkan cara mendapatkan indeks pilihan yang dipilih yang disebutkan di bawah ini

Bagaimana itu bekerja

• Awalnya, pilih dan komponen dengan bantuan metode querySelector(). Setelah itu, tautkan click event listener ke tombol ini dan tampilkan indeks yang dipilih dengan bantuan metode alert() jika tombol ditekan. properti nilai Properti nilai elemen bergantung pada komponen dan beberapa atribut HTML-nya
  • Properti value dari kotak pilih akan menjadi string kosong ketika tidak ada opsi yang dipilih
  • Properti nilai dari kotak pilih akan menjadi nilai dari opsi yang dipilih ketika opsi telah dipilih dan berisi atribut nilai
  • Properti nilai dari kotak pilih akan menjadi teks dari opsi yang dipilih saat opsi telah dipilih dan tidak berisi atribut nilai
  • Properti nilai dari kotak pilih akan diturunkan dari opsi awal yang dipilih mengenai dua aturan terakhir ketika lebih dari satu opsi dipilih

  Perhatikan contoh di bawah ini

  Dalam contoh di atas ini

  • Atribut nilai elemen kosong saat kita memilih opsi awal. Atribut nilai dari kotak pilih adalah Ember. js karena opsi yang dipilih tidak mengandung atribut nilai saat kami memilih opsi terakhir. Atribut nilai akan menjadi "1" atau "2" saat kita memilih opsi ketiga atau kedua. Tipe HTMLOptionElement Tipe HTMLOptionElement mengilustrasikan komponen berisi atribut opsi yang memungkinkan kita untuk mengakses opsi koleksi

    Misalnya, untuk mengakses nilai dan teks dari opsi kedua, kami menggunakan di bawah ini

    Untuk mendapatkan opsi komponen yang dipilih bersama dengan pilihan individu, kami menggunakan kode di bawah ini. Setelah itu, kita dapat mengakses nilai dan teks dari opsi yang dipilih berdasarkan properti nilai dan teks. Ketika komponen mengizinkan lebih dari satu pilihan, kita dapat menggunakan atribut selected untuk menentukan pilihan mana yang dipilih

    Dalam contoh, sb. opsi adalah objek seperti array. Oleh karena itu, ia tidak mengandung metode filter() yang sama dengan objek Array

    Untuk meminjam jenis metode ini melalui objek array, kami menggunakan metode call() , di bawah ini memberikan array pilihan yang dipilih

    Dan untuk mendapatkan atribut teks dari opsi apa pun, kita dapat menggabungkan hasil dari metode filter() bersama dengan metode map() seperti di bawah ini

    Untuk mendapatkan Opsi Terpilih menggunakan for loop

    KITA dapat menggunakan for loop untuk iterasi dengan opsi daftar yang dipilih untuk menentukan mana yang dipilih. Suatu fungsi dapat dijelaskan untuk mengembalikan referensi ke opsi atau nilai yang dipilih. Di bawah ini memberikan referensi ke opsi yang dipilih

    Fungsi ini memberikan opsi pilihan tunggal, yang kompatibel untuk jenis daftar pilih pilih-satu. Fungsi yang sama kompatibel untuk pilih-beberapa tipe pf daftar pilih dapat memberikan lebih dari satu opsi yang dipilih

    Mengambil nilai yang dipilih dari elemen dilakukan dengan menggunakan atribut nilai selectElement. value Pada kode di atas, dokumen HTML memiliki elemen. Idnya diatur untuk menyapa, dan memiliki tiga opsi untuk dipilih. Setiap opsi memiliki atribut nilai – atribut nilai ini bisa identik dengan teks, atau tidak – Anda bebas menetapkan nilai mana pun yang Anda inginkan

    Dalam kode JavaScript di atas, nilai elemen diteruskan sebagai argumen untuk menghibur. catatan(). Elemen diambil menggunakan dokumen. metode getElementById(), yang menemukan elemen dalam dokumen dengan id yang ditentukan

    Atribut value mengembalikan nilai opsi yang saat ini ditampilkan di drop-down

    Namun, pada contoh di atas, pencetakan ke konsol hanya akan terjadi satu kali. Jika pengguna memilih opsi baru, nilai baru tidak akan dicetak ke log

    Ada tiga cara umum untuk mengatasi masalah ini

    1. acara DOM

    Solusi pertama adalah menggunakan event DOM untuk memanggil event handler. Ambil kode contoh berikut

    HTML

    Elemen di atas menggunakan event DOM onchange. Acara onchange menyala setiap kali nilai yang berbeda dipilih dari daftar drop-down. Acara tersebut kemudian memicu fungsi getOption(), yang menampilkan hasilnya. Fungsi JavaScript getOption() { konsol. log (dokumen. getElementById('salam'). nilai); . Ini berarti bahwa penangan fungsi tidak dipanggil kecuali jika nilai drop-down berubah. Ada event lain yang bisa kita gunakan sebagai pengganti onchange, tetapi masing-masing memiliki masalahnya sendiri. Acara onclick selalu mengembalikan opsi pertama dalam daftar terlebih dahulu, karena pengguna harus mengklik menu drop-down untuk membuka daftar pilihan. Saat elemen baru dipilih, event handler dipanggil lagi dan nilai yang dipilih dikembalikan seperti yang diharapkan. Acara onblur mengembalikan nilai yang benar, tetapi memicu fungsi penangan hanya saat bidang kehilangan fokus. Hal ini dapat terjadi akibat pengguna mengklik di tempat lain pada halaman, atau menggunakan tombol tab untuk berpindah ke bidang lain. 2. Menambahkan opsi "judul" placeholder Karena perilaku event handler dengan menu pilih, solusi umum adalah menggunakan elemen placeholder sebagai opsi pertama. Elemen placeholder ini memberikan prompt singkat tentang cara menggunakan drop down. Ambil kode contoh berikut. HTML

    Ini mendefinisikan menu drop-down dengan opsi default menjadi placeholder yang bertuliskan "Pick your greet". Sekarang, perubahan harus terjadi jika pengguna ingin memilih salam

    Catatan. Dalam contoh di atas, dimungkinkan untuk memilih "Pick your greet" sebagai opsi. Meskipun klik pertama pada placeholder tidak akan mengaktifkan getOption() (karena tidak ada perubahan yang dilakukan), placeholder dapat dipilih setelah perubahan dilakukan. Nilai opsi ini, secara default, akan sama dengan teks opsi itu sendiri – dalam contoh di atas, nilainya akan berupa String yang berisi “Pick your greet”

    Kita dapat mengembangkannya dengan menambahkan nilai kemudahan ke opsi default ini, lalu memfilternya di awal fungsi getSelection() kita. Kode contoh berikut menunjukkan cara melakukannya

    JavaScript

    function getOption(el) {
      const option = el.value;
      if (option === 'esc') return
        console.log(option);
      return option;
    }
    

    _

    Sekarang, ketika opsi "Pick your greet" dipilih, konsol. log(opsi) tidak akan muncul

    Catatan. nilai default dari elemen opsi adalah teks yang muncul di antara

    tag. Ini diubah dengan menambahkan atribut nilai. Jika ada atribut nilai, ini lebih diutamakan daripada nilai default

    3. Menggunakan formulir

    Opsi ketiga adalah menggunakan Formulir. Formulir perlu dikirimkan, dan ketika dikirimkan, semua nilai dari semua input dapat diatur ke dalam Objek, yang merupakan cara umum untuk menyimpan data dalam JavaScript. Anda juga dapat menyimpan isi formulir dalam Array atau String, tergantung kebutuhan aplikasi Anda. Kode contoh berikut menunjukkan cara menggunakan formulir untuk mengambil nilai daftar drop-down di halaman

    HTML

      
        
        
        
      
      
        
        
        
      
      Submit
    

    JavaScript

    function submitForm(ev) {
      ev.preventDefault();
      let selectInputs = document.querySelectorAll('select');
      let res = [];
      selectInputs.forEach(input => {
       res.push(input.value)
      })
      return res;
    }
    

    Formulir memungkinkan penanganan banyak masukan, mengumpulkan semua informasi hanya sekali, saat formulir dikirimkan. Pada contoh di atas, ada dua menu di. Formulir di atas dikirimkan dengan mengeklik tombol Kirim, yang akan memanggil pengendali peristiwa submitForm(). Fungsi ini menerima event DOM pemicu sebagai parameter – dalam hal ini, ia menerima event onclick. Secara default, mengirimkan formulir menghasilkan penyegaran halaman. Ini menghapus semua data yang telah disisipkan pengguna, menyetel ulang formulir ke nilai defaultnya. Kode di atas mencegah hal ini terjadi dengan mengambil peristiwa yang diterima sebagai parameter dan menerapkan metode preventDefault() ke dalamnya. Ini mencegah penyegaran halaman dan hilangnya data selanjutnya. Baris berikutnya menemukan semua elemen dalam formulir dan mendeklarasikan susunan ulang tempat data akan disisipkan. Ingat dokumen itu. querySelectorAll() mengembalikan array, oleh karena itu diperlukan metode iterasi – mis. g. untuk setiap(). forEach() mengambil setiap elemen input yang ada dalam array yang dikembalikan oleh querySelectorAll, lalu mendorong nilainya ke res

    Bagaimana Anda mendapatkan nilai yang dipilih dari opsi pilih?

    Metode 1. Menggunakan properti value . Nilai elemen yang dipilih dapat ditemukan dengan menggunakan properti nilai pada elemen yang dipilih yang menentukan daftar. Properti ini mengembalikan string yang mewakili atribut nilai dari elemen

    Bagaimana cara mendapatkan nilai atribut opsi pilih dalam JavaScript?

    Sebagian besar, atribut nilai dari tag opsi digunakan di kotak pilih . Selain nilai opsi, atribut khusus dapat ditentukan dalam tag opsi dari dropdown pilihan.

    Bagaimana cara meneruskan nilai dropdown yang dipilih dalam JavaScript?

    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. -" +" "+ gettext);

    Bagaimana Anda memilih opsi tertentu dalam elemen pilih di JavaScript?

    Bagaimana itu bekerja

    Indeks- Indeks opsi dalam grup opsi

    Dipilih- Ini mengembalikan nilai sebenarnya jika opsi dipilih. Kami menyetel properti yang dipilih menjadi benar untuk memilih opsi

    Teks- Ini mengembalikan teks opsi

    Nilai- Ini mengembalikan nilai atribut HTML