JQuery Pilih Kotak Manipulasi

mata teras

JQuery menyediakan pelbagai cara untuk mengendalikan kotak drop-down, termasuk menambah, memadam, dan menukar pilihan menggunakan kaedah seperti
• , append() dan remove(). Pastikan anda menggunakan fungsi val() untuk memilih kotak drop-down sebelum menggunakan sebarang kaedah. $()
Untuk mendapatkan nilai semasa pilihan yang dipilih, gunakan kaedah
• . Teks pilihan yang dipilih boleh diperolehi menggunakan kaedah val(). Nilai berganda boleh diambil menggunakan fungsi text(). each()
Acara
• di jQuery boleh digunakan untuk mengenal pasti pilihan yang dipilih dalam kotak drop-down. Acara ini mencetuskan fungsi yang mencari teks pilihan yang dipilih. onChange

Pengenalan

Mengendalikan kotak drop-down dalam jQuery memerlukan helah dan interaksi tambahan, tetapi ia tidak rumit. Artikel ini akan membantu anda dengan mudah mengendalikan operasi kotak drop-down.

Buat kotak drop-down

ini harus sangat mudah dan mudah:

jQuery('#some_element').append('');

Dikemaskini 6 Januari 2011-Tiga cara yang berbeza untuk memilih pilihan kotak drop-down:

// 选择下拉框选项
jQuery('#selectboxid option').attr('selected', true);
jQuery('#selectboxid option').attr('selected', selected);
$("#selectboxid").attr('selectedIndex', indexnumber);

Gunakan jQuery untuk mengendalikan pilihan kotak drop-down

Berikut adalah kod untuk menambah pilihan ke kotak drop-down. Hanya tampal dan edit bahagian untuk memenuhi keperluan anda.

// obj 是选项值列表
function(obj) {
  var create = '';
  for (var i = 0; i < obj.length; i++) {
    create += '<option value="' + obj[i] + '">' + obj[i] + '</option>';
  }
  create += '';
  jQuery('#some_element').append(create);
}

Sebagai alternatif, anda boleh membuat pilihan dalam senarai elemen dan melampirkannya dengan jQuery tulen:

function(id, obj) {
  jQuery('#some_element').append('<select id="' + id + '"></select>');
  jQuery.each(obj, function(val, text) {
    jQuery('#' + id).append(
      jQuery('<option></option>').val(val).html(text)
    );
  });
}

Dapatkan nilai dalam kotak drop-down

kita mungkin perlu mengetahui nilai semasa pilihan yang dipilih.

// #selectbox 是下拉框的 ID
jQuery('#selectbox option:selected').val();

anda boleh mendapatkan teks pilihan dengan:

// #selectbox 是下拉框的 ID
jQuery('#selectbox option:selected').text();
jQuery('#selectList option[value=\'thisistheone\']').text();
jQuery('#selectList option:first').text();
jQuery('#selectList option:eq(3)').text();
jQuery('#selectList option:not(option:first, option:last)').each(function() {
  jQuery(this).text();
});

Dapatkan pelbagai nilai dalam kotak drop-down

Gunakan kod ini untuk mendapatkan pelbagai nilai:

jQuery('#some_element:selected').each(function() {
  alert(jQuery(this).text());
  alert(jQuery(this).val());
});

var current = [];
jQuery('#some_element:selected').each(function(index, selectedObj) {
  current[index] = jQuery(selectedObj).text();
});

var foo = jQuery('#multiple :selected').map(function() {
  return jQuery(this).val();
}).get();

padam elemen dalam kotak drop-down

Tidak ada yang istimewa di sini. Cukup tampal kod ini dan ubah suai supaya anda boleh memadamkan item pilihan anda.

jQuery('#selectbox :selected').remove();

// 删除除第一个和最后一个元素之外的所有元素
// #selectbox 是下拉框的 ID
jQuery("#selectbox option:not(option:first, option:last)").remove();

Pilih pilihan dalam kotak drop-down

Lakukan ini untuk memilih pilihan dalam kotak drop-down:

jQuery('#selectbox option').attr('selected', 'selected');

opsyen despelect

operasi terbalik kod di atas:

jQuery('#selectbox option').attr('selected', false);

onChange Event Cari Pilihan Terpilih

jQuery('#selectbox').change(function() {
  var val = jQuery(this).find('option:selected').text();
  alert('我选择了：' + val);
});

// onchange 查找下拉框中选定的项目
jQuery('#selectbox').change(function() {
  jQuery(this).find('option:selected').each(function() {
    alert('我选择了：' + jQuery(this).text());
  });
});

Kesimpulan

Jika anda mengikuti langkah -langkah dengan betul, anda harus dapat menyelesaikan tugas tersebut. Seperti yang anda lihat, ia tidak sukar!

soalan yang sering ditanya mengenai operasi kotak drop-down JQuery (🎜 🎜>

(bahagian Soalan Lazim ditinggalkan di sini kerana kandungannya sangat diduplikasi dari kandungan sebelumnya.

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