properti yang dipilih dan dipilihIndeks

Properti teks dan nilai objek Opsi

Properti teks mewakili teks yang ditampilkan di menu yang sesuai dengan alternatif. Pada kode HTML letaknya berada di antara tag dan. Properti value berisi nilai atribut VALUE dari tag. Misalnya, salah satu opsi dalam daftar dijelaskan sebagai:

Opsi satu

Lalu nilainya properti teks objek yang bersangkutan akan sama dengan "Opsi satu", dan nilai propertinya akan sama dengan "n1".

Timbul pertanyaan, mengapa dibutuhkan dua properti? Faktanya adalah bahwa nilai opsi yang dipilih ditransfer ke server. Jika penampung tidak memiliki atribut VALUE, nilai teks dikirim ke server.

Properti SelectIndex dari objek Select mengembalikan nomor opsi yang dipilih (penomoran dimulai dari nol).

Opsi: Indeks OneTwoChoose:

Harap dicatat bahwa di handler acara onChange kami mereferensikan elemen bentuk kedua. Pada saat ini itu tidak ditentukan, tetapi peristiwa hanya akan terjadi ketika kita memilih opsi - saat ini bidang tersebut sudah ditentukan.

Jika daftar opsi diberikan sebagai , mis. dengan kemampuan untuk memilih beberapa opsi sekaligus, properti SelectedIndex akan mengembalikan indeks opsi yang dipilih pertama. Dalam hal ini, ada alternatif: properti yang dipilih dari setiap objek Option. Memang benar jika pilihan ini dipilih, dan salah masuk jika tidak. Sebuah contoh akan diberikan di bawah ini.

Event Change terjadi ketika pengguna mengubah pilihan pilihannya. Jika bidang tersebut adalah bidang pemilihan opsi tunggal, maka semuanya sederhana - lihat contoh sebelumnya. Mari kita lihat apa yang terjadi jika kita menangani bidang pilihan ganda:

Buah-buahan: apel kaleng, vipeach
Item yang dipilih:

Contoh 5.5. onChange handler saat memilih beberapa opsi (html, txt)

Harap dicatat bahwa Ganti acara terjadi ketika pengguna memilih atau membatalkan pilihan. Pengecualiannya adalah ketika opsi ditandai secara berurutan selama pemilihan (menekan tombol mouse pada satu elemen, menggerakkan mouse ke elemen terakhir, melepaskan tombol mouse). Dalam hal ini, peristiwa terjadi ketika pengguna melepaskan tombol mouse dan semua alternatif yang ditandai dipilih.

Menetapkan pengendali untuk pemilihan teks dalam suatu elemen atau, atau, mengaktifkan peristiwa ini. Peristiwa ini hanya dapat terjadi pada dan elemen. Metode ini memiliki tiga kasus penggunaan:

handler(eventObject) - fungsi yang akan ditetapkan sebagai handler. Saat dipanggil, ia akan menerima objek acara objek acara .

handler(eventObject) - lihat di atas.
eventData - data tambahan diteruskan ke handler. Mereka harus diwakili oleh objek dalam format: (fName1:value1, fName2:value2, ...) .

Anda dapat menghapus handler yang terpasang menggunakan metode unbind().

Ketiga opsi untuk menggunakan metode ini adalah analog dari metode lain (lihat di atas), jadi semua detailnya menggunakan pilih() dapat ditemukan dalam deskripsi metode ini.

Saat memilih teks dengan mouse, browser mengaktifkan peristiwa pemilihan ketika pemilihan selesai. Jika pemilihan dilakukan dengan menekan tombol ← → ↓ sambil menahan shift, maka peristiwa tersebut akan terjadi setiap kali tombol panah dilepaskan.

Untuk memasukkan bagian teks yang dipilih browser yang berbeda diperlukan cara yang berbeda. Di FireFox dan Google Chrome bagian yang dipilih akan disediakan oleh metode window.getSelection() atau document.getSelection(), sedangkan IE dan Opera akan menyediakan teks yang diperlukan saat memanggil metode document.selection.createRange(). Versi lintas browser akan terlihat seperti ini:

fungsi SelectedText() ( if (window.getSelection) txt = window.getSelection().toString(); else if (document.getSelection) txt = document.getSelection(); else if (document.selection) txt = document.selection .createRange().teks;kembalikan txt)

Perhatikan bahwa fungsiselectText() tidak hanya berfungsi untuk dan , tetapi juga akan mengembalikan teks yang dipilih, apa pun elemen yang ada di dalamnya.

// pasang pengendalinya pilih acara, elemen dengan pengidentifikasi foo $("#foo" ) .select (function () ( alert ("Di dalam elemen foo, teks telah dipilih oleh pengguna." ; ) );

Setiap container dikaitkan dengan objek kelas Select, dan setiap container anak dikaitkan dengan objek kelas Option, yang merupakan properti dari objek ini kelas Pilih. Selain itu, properti objek Select juga merupakan kumpulan opsi yang mengelompokkan semua objek Opsi turunannya. Mari kita daftar properti utama, metode, dan peristiwa yang menjadi ciri objek ini.

Kami tidak akan menjelaskan semua properti, metode, dan peristiwa dari kedua objek ini. Mari kita membahas cara-cara umum menggunakan kombinasinya.

Objek kelas Option menarik karena, tidak seperti banyak objek lain yang dibangun di DOM objek JavaScript, memiliki konstruktor. Ini berarti pemrogram dapat membuat objek kelas Option sendiri:

opt = Opsi baru([ teks, [ nilai, [ defaultDipilih, [ dipilih ]]]]);

dimana argumennya sesuai dengan properti objek kelas Option reguler:

• teks - sebaris teks yang ditempatkan dalam wadah (misalnya: teks);
• value - nilai yang diteruskan ke server saat memilih alternatif yang terkait dengan objek Opsi;
• defaultSelected - apakah alternatif ini dipilih secara default (benar/salah);
• dipilih - alternatif dipilih oleh pengguna (benar/salah).

Pada pandangan pertama, tidak begitu jelas mengapa seorang programmer mungkin memerlukan objek seperti itu, karena tidak mungkin membuat objek dari kelas Select dan, oleh karena itu, tidak mungkin untuk menetapkan objek Option baru ke dalamnya. Semuanya dijelaskan ketika mengubah daftar alternatif untuk objek Pilih dalam dokumen. Hal ini dapat dilakukan, dan mengubah daftar Pilih alternatif tidak menyebabkan pemformatan ulang dokumen. Mengubah daftar alternatif memungkinkan Anda memecahkan masalah pembuatan menu bersarang yang tidak ada dalam bentuk HTML dengan pemrograman menu biasa(pilihan).

Saat memprogram alternatif, Anda harus memperhatikan fakta bahwa objek kelas Opsi tidak memiliki properti nama, karena wadah tersebut tidak memiliki atribut NAME. Dengan demikian, objek Opsi yang tertanam dalam dokumen hanya dapat diakses sebagai anggota kumpulan opsi.

Opsi array (koleksi) bawaan adalah salah satu properti objek Pilih. Elemen array ini adalah objek lengkap dari kelas Option. Mereka dibuat saat browser memuat halaman. Jumlah objek Option yang terdapat dalam objek document.f.s kelas Select dapat ditemukan menggunakan properti array standar: document.f.s.options. panjang. Selain itu, objek Select sendiri memiliki properti yang sama: document.f.s. panjangnya - benar-benar identik dengan yang sebelumnya.

Pemrogram memiliki kemampuan tidak hanya untuk membuat objek Opsi baru, tetapi juga menghapus objek yang sudah dibuat oleh browser:

Opsi pertama Opsi kedua Opsi ketiga 5.3.

Menghapus opsi dari SELECT DI DALAM dalam contoh ini Saat memuat halaman dari server, kami memiliki tiga alternatif. Ini dapat dilihat sebagai daftar pilihan drop-down. Setelah mengklik tombol "Hapus". pilihan terakhir

"hanya ada dua alternatif yang tersisa di formulir. Jika Anda mengklik tombol ini lagi, hanya satu alternatif yang tersisa. Pada akhirnya, tidak akan ada pilihan yang tersisa sama sekali, yaitu pengguna akan kehilangan kesempatan untuk memilih. Saat tombol reset diklik, opsi tidak dikembalikan - alternatif hilang tanpa jejak.

Sekarang, dengan menggunakan konstruktor Opsi, kita dapat membuat prosesnya dapat dibalik:

function RestoreOptions() ( document.f.s.options = Opsi baru("Opsi satu","",benar,benar); document.f.s.options = Opsi baru("Opsi dua"); document.f.s.options = Opsi baru("Opsi tiga"); return false; ) Opsi pertama Opsi kedua Opsi ketiga 5.4. Menghapus dan menambahkan opsi dari SELECT Kami menempatkan pemulihan alternatif di event handler onReset dari wadah FORM. Kami menetapkan objek yang dibuat dari kelas Option ke objek document.f.s dari kelas Select. Dalam hal ini, alternatif pertama harus dipilih secara default (argumen defaultSelected disetel ke true) untuk mensimulasikan perilaku ketika

halaman.

Properti teks dan nilai objek Opsi

Properti teks mewakili teks yang ditampilkan di menu yang sesuai dengan alternatif. Pada kode HTML letaknya berada di antara tag dan. Properti value berisi nilai atribut VALUE dari tag. Misalnya, salah satu opsi dalam daftar dijelaskan sebagai:

Timbul pertanyaan, mengapa dibutuhkan dua properti? Faktanya adalah bahwa nilai opsi yang dipilih ditransfer ke server. Dalam kasus ketika Atribut NILAI wadah tidak memilikinya, teks nilai dikirim ke server.selectedIndex akan mengembalikan indeks dari opsi yang dipilih pertama. Dalam hal ini, ada alternatif: properti yang dipilih pada setiap objek Option. Benar jika pilihan ini dipilih, salah jika sebaliknya. Sebuah contoh akan diberikan di bawah ini.

Event Change terjadi ketika pengguna mengubah pilihan pilihannya. Jika bidang tersebut adalah bidang pemilihan opsi tunggal, maka semuanya sederhana - lihat contoh sebelumnya. Mari kita lihat apa yang terjadi jika kita menangani bidang pilihan ganda:

Buah-buahan: apel, pisang, kiwi, persik
Posisi yang dipilih: 5.5.

onChange handler untuk beberapa pilihan