Bagaimana untuk mengalih keluar pilihan yang ditentukan dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengalih keluar pilihan yang ditentukan dalam jquery

PHPz

Lepaskan： 2023-05-23 15:22:37

asal

1486 orang telah melayarinya

jQuery ialah perpustakaan JavaScript yang biasa digunakan yang boleh memanipulasi DOM dan mengendalikan acara dengan mudah. Apabila membangunkan aplikasi web, anda selalunya perlu mengendalikan kotak lungsur, seperti menambah, memadam dan mengubah suai pilihan. Untuk pilihan penyingkiran, kita boleh menggunakan kaedah remove() jQuery. Artikel ini memperincikan cara untuk mengalih keluar pilihan yang ditentukan daripada kotak lungsur menggunakan jQuery.

1. Bagaimana untuk mendapatkan pilihan kotak lungsur

Untuk memadamkan pilihan dalam kotak lungsur, anda perlu mendapatkan pilihan yang sepadan terlebih dahulu. Kita boleh menggunakan kaedah find() jQuery untuk mendapatkan semua pilihan dalam kotak lungsur turun Kodnya adalah seperti berikut:

var options = $('#select-id').find('option');

Salin selepas log masuk

di mana, #select-id ialah ID kotak lungsur, dan <. 🎜> ialah pemilih terbina dalam jQuery, yang mewakili elemen. Kod di atas akan mengembalikan objek jQuery yang mengandungi semua pilihan dalam kotak lungsur. option

Jika anda perlu mendapatkan pilihan khusus, anda boleh menggunakan kaedah eq() jQuery untuk menentukan indeks pilihan. Sebagai contoh, untuk mendapatkan pilihan ketiga dalam kotak lungsur, kodnya adalah seperti berikut:

var option = $('#select-id').find('option').eq(2);

Salin selepas log masuk

Antaranya, parameter kaedah

mewakili indeks pilihan, mengira dari 0. eq()

2. Bagaimana untuk memadam pilihan

Selepas mendapatkan elemen pilihan, anda boleh menggunakan kaedah remove() jQuery untuk memadam pilihan, seperti yang ditunjukkan di bawah:

option.remove();

Salin selepas log masuk

Dalam ini cara, anda boleh memadamkan pilihan yang ditentukan.

Jika anda perlu mengalih keluar berbilang pilihan, anda boleh menggunakan kaedah each() jQuery untuk merentasi senarai pilihan dan memadamkannya satu persatu Kod sampel adalah seperti berikut:

var options = $('#select-id').find('option');
options.each(function() {
  if($(this).val() == 'value1' || $(this).val() == 'value2') {
    $(this).remove();
  }
});

Salin selepas log masuk

Di atas kod akan memadamkan nilai dalam kotak lungsur turun Pilihan untuk

atau value1. value2

3. Demonstrasi

Berikut ialah contoh demonstrasi lengkap yang menunjukkan cara memadam pilihan yang ditentukan dalam kotak lungsur melalui acara klik butang:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery 删除下拉框选项</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <select id="fruit">
    <option value="">请选择水果</option>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
    <option value="watermelon">西瓜</option>
  </select>
  <button id="remove-btn">删除水果</button>
  <script>
    $(function() {
      $('#remove-btn').click(function() {
        var options = $('#fruit').find('option');
        options.each(function() {
          if($(this).val() == 'banana' || $(this).val() == 'watermelon') {
            $(this).remove();
          }
        });
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, Kami mencipta kotak lungsur dengan lima pilihan dan butang padam. Apabila butang diklik, kod akan mengalih keluar pilihan dengan nilai

atau banana. Anda boleh melihat kesan demonstrasi dengan menjalankan kod di atas. watermelon

Ringkasan

jQuery ialah perpustakaan JavaScript yang sangat berkuasa yang boleh memanipulasi DOM dan mengendalikan acara dengan mudah. Untuk operasi seperti menambah, memadam dan mengubah suai pilihan dalam kotak drop-down, API jQuery menyediakan banyak kaedah mudah yang boleh digunakan oleh pembangun secara fleksibel. Artikel ini memperincikan cara untuk mengalih keluar pilihan yang ditentukan daripada kotak lungsur menggunakan jQuery. Harap ini membantu!

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar pilihan yang ditentukan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!