Pilihan Pilih JQuery Loop

Panduan JQuery ringkas ini menunjukkan cara memanipulasi pilihan kotak pilihan (dropdowns) dengan cekap. Belajar untuk mendapatkan nilai dan teks pilihan, menjadikan manipulasi bentuk lebih mudah. ​​

Contoh 1: Mengakses semua pilihan

coretan ini melangkah melalui setiap pilihan dalam elemen pilih dengan id "pilih," memaparkan teks dan nilai menggunakan

. alert()

$('#select > option').each(function() {
    alert($(this).text() + ' ' + $(this).val());
});

Contoh 2: Mengakses hanya pilihan yang dipilih

Contoh ini memberi tumpuan kepada pilihan yang dipilih sekarang, mengeluarkan teks dan nilainya.

$('#select > option:selected').each(function() {
    alert($(this).text() + ' ' + $(this).val());
});

Contoh 3: Mendapatkan data pilih sebagai array

Fungsi ini mengambil nama kelas sebagai input dan mengembalikan pelbagai objek, masing -masing mengandungi teks dan nilai pilihan yang dipilih dalam elemen yang sepadan dengan kelas itu.

function getSelects(klass) {
    var selected = [];
    $('select.' + klass).children('option:selected').each( function() {
         var $this = $(this);
         selected.push( { text: $this.text(), value: $this.val() } );
    });
    return selected;
}

Soalan Lazim (Soalan Lazim)

Bahagian ini memberikan jawapan kepada soalan umum mengenai penggunaan jQuery dengan pilihan pilih.

Q1: Bagaimana untuk gelung melalui Pilihan Pilihan? Gunakan kaedah JQuery's

untuk berulang:

.each()

$('select option').each(function() {
  var optionValue = $(this).val();
  var optionText = $(this).text();
  // Your code here
});

Q2: Bagaimana untuk memilih pilihan tertentu?

Gunakan pemilih

:

:selected

var selectedOption = $('select option:selected').val();

q3: Bagaimana menukar pilihan yang dipilih?

Gunakan kaedah

:

.val()

$('select').val('Option2');

Q4: Bagaimana untuk menambah pilihan?

Gunakan kaedah

:

.append()

Q5: Bagaimana Menghapus Pilihan?

$('select').append('<option value="newOption">New Option</option>');

Gunakan kaedah :

.remove()

q6: Bagaimana untuk melumpuhkan/membolehkan pilihan?

$('select option[value="Option2"]').remove();

Gunakan dan

:

.attr() .removeAttr()

Q7: Bagaimana untuk mendapatkan bilangan pilihan?

$('select option[value="Option2"]').attr('disabled', 'disabled'); // Disable
$('select option[value="Option2"]').removeAttr('disabled'); // Enable

Gunakan harta :

.length

q8: Bagaimana untuk membersihkan semua pilihan?

var numberOfOptions = $('select option').length;

Gunakan kaedah :

.empty()

Q9: bagaimana untuk memeriksa sama ada dropdown kosong?

$('select').empty();

Respons yang disemak ini memberikan penjelasan yang lebih ringkas dan teratur, sambil mengekalkan maklumat dan imej penting.

Atas ialah kandungan terperinci Pilihan Pilih JQuery Loop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!