Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan nilai kotak drop-down yang dipilih dalam jquery

Bagaimana untuk menetapkan nilai kotak drop-down yang dipilih dalam jquery

PHPz
PHPzasal
2023-04-26 14:22:453236semak imbas

Dalam pembangunan web, selalunya perlu menggunakan kotak lungsur (juga dipanggil pilih) untuk membolehkan pengguna memilih beberapa pilihan. Kadangkala, kita perlu pratetapkan pilihan kotak lungsur, iaitu, pilihan tertentu telah dipilih apabila halaman dimuatkan. Pada masa ini, kita boleh menggunakan jquery untuk menetapkan nilai pilihan kotak lungsur.

jquery ialah perpustakaan JavaScript yang biasa digunakan, yang boleh memudahkan penulisan kod JavaScript dan menyediakan banyak kaedah operasi yang mudah. Apabila menggunakan jquery untuk menetapkan nilai kotak drop-down yang dipilih, anda perlu mendapatkan elemen kotak drop-down yang sepadan terlebih dahulu.

Terdapat banyak cara untuk mendapatkan elemen kotak lungsur turun, yang boleh diperoleh mengikut atribut id, atribut nama, atribut kelas, dll. pada kotak lungsur. Jika kotak lungsur turun mempunyai atribut id yang unik, anda boleh menggunakan $("#id") untuk mendapatkan elemen kotak lungsur, seperti yang ditunjukkan di bawah:

var selectBox = $("#selectBox");

Jika kotak lungsur turun tidak mempunyai atribut id, anda boleh menggunakan $( "select[name=selectName]") untuk mendapatkan elemen kotak lungsur, dengan selectName ialah nilai atribut nama bagi kotak lungsur:

var selectBox = $("select[name=selectName]");

Selepas mendapatkan elemen kotak lungsur, anda boleh menggunakan jquery untuk menetapkan kotak lungsur Nilai yang dipilih telah dipilih. jquery menyediakan dua kaedah untuk menetapkan nilai pilihan kotak lungsur, iaitu kaedah val() dan prop().

1 Gunakan kaedah val() untuk menetapkan nilai kotak drop-down yang dipilih

Kaedah val() digunakan untuk mendapatkan atau menetapkan nilai kotak drop-down. . Apabila kaedah val() tidak mengambil parameter, ini bermakna untuk mendapatkan nilai pilihan yang dipilih pada masa ini apabila kaedah val() mengambil parameter, ini bermakna untuk menetapkan nilai kotak lungsur yang dipilih kepada nilai yang ditentukan.

Berikut ialah kod sampel yang menggunakan kaedah val() untuk menetapkan nilai kotak lungsur turun yang dipilih:

// 获取下拉框当前选中的值
var selectedValue = selectBox.val();

// 设置下拉框的选中值为指定值
selectBox.val("2");

Dalam kod di atas, mula-mula gunakan val( ) untuk mendapatkan nilai kotak lungsur yang dipilih pada masa ini, dan kemudian gunakan kaedah val("2") untuk menetapkan nilai kotak lungsur yang dipilih kepada "2", iaitu, pilih pilihan. dengan nilai "2" dalam kotak lungsur.

2. Gunakan kaedah prop() untuk menetapkan nilai kotak lungsur turun

Kaedah prop() digunakan untuk mendapatkan atau menetapkan nilai atribut elemen. Untuk kotak lungsur, anda boleh menggunakan kaedah prop("selectedIndex", index) untuk menetapkan pilihan yang dipilih. Antaranya, indeks ialah kedudukan pilihan yang dipilih dalam kotak lungsur, dikira dari 0.

Berikut ialah kod sampel yang menggunakan kaedah prop() untuk menetapkan nilai kotak lungsur turun yang dipilih:

// 获取当前选中的选项在下拉框中的位置
var selectedIndex = selectBox.prop("selectedIndex");

// 设置下拉框选中的选项为第二项
selectBox.prop("selectedIndex", 1);

Dalam kod di atas, mula-mula gunakan prop( kaedah "selectedIndex") untuk mendapatkan nilai semasa kotak drop-down Kedudukan pilihan yang dipilih dalam kotak drop-down, dan kemudian gunakan kaedah prop("selectedIndex", 1) untuk menetapkan pilihan yang dipilih dalam drop-down -kotak bawah ke item kedua.

Ringkasan

Artikel ini memperkenalkan dua kaedah menggunakan jquery untuk menetapkan nilai yang dipilih bagi kotak lungsur: val() dan prop(). Kaedah val() digunakan untuk menetapkan nilai kotak drop-down, dan kaedah prop() digunakan untuk menetapkan nilai properti kotak drop-down. Kedua-dua kaedah boleh digunakan untuk melaksanakan fungsi menetapkan nilai kotak drop-down yang dipilih bergantung pada situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan nilai kotak drop-down yang dipilih dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn