jquery mengalih keluar beberapa pilihan

Apabila membangunkan aplikasi web, selalunya perlu menggunakan kotak pilihan lungsur turun (pilih) untuk membolehkan pengguna memilih kandungan yang sepadan. Kadangkala, kita perlu menambah dan memadam pilihan secara dinamik dalam kotak pilihan lungsur mengikut keperluan perniagaan. Pada masa ini, jQuery boleh membantu kami melaksanakan fungsi ini dengan mudah.

Seterusnya, kami akan memperkenalkan cara menggunakan jQuery untuk memadamkan pilihan dalam kotak pilihan juntai bawah.

1 Gunakan kaedah alih keluar

Kaedah alih keluar dalam jQuery boleh membantu kami memadamkan terus elemen dan unsur turunannya daripada pepohon DOM, termasuk semua pendengar acara dan data yang dilampirkan. Kami boleh memadamkan pilihan dalam kotak pilihan juntai bawah dengan cara ini.

Pelaksanaan khusus adalah seperti berikut:

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

<button>删除选项2</button>

$('button').click(function(){
  $('#mySelect option[value="2"]').remove();
});

Kod di atas boleh membantu kami memadamkan "Pilihan 2" dalam kotak pilihan lungsur turun. Kami mula-mula memilih elemen pilih dengan id "mySelect", kemudian menggunakan pemilih elemen anaknya untuk memilih elemen pilihan dengan atribut nilai "2", dan memanggil kaedah alih keluarnya untuk melaksanakan operasi pemadaman.

2 Gunakan kaedah detach

Dalam sesetengah kes, kami tidak mahu memadamkan pilihan secara langsung, tetapi mahu mencache pilihan supaya ia boleh dimasukkan ke dalam pilihan lungsur turun kotak semula pada bila-bila masa. Pada masa ini, anda boleh menggunakan kaedah detach dalam jQuery. Kaedah ini serupa dengan kaedah alih keluar, tetapi ia tidak memadamkan pendengar dan data acara elemen, tetapi mengalih keluarnya buat sementara waktu daripada pepohon DOM.

Menggunakan kaedah detach juga boleh membantu kami memadamkan pilihan dalam kotak pilihan lungsur turun. Pelaksanaan khusus adalah seperti berikut:

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

<button>删除选项2</button>

$('button').click(function(){
  var option2 = $('#mySelect option[value="2"]').detach();
});

Kod di atas boleh membantu kami memadamkan "Pilihan 2" dalam kotak pilihan lungsur turun dan cachekannya dalam pilihan pembolehubah2. Jika anda perlu memasukkannya ke dalam kotak pilihan juntai bawah sekali lagi, anda hanya perlu memanggil kaedah tambah atau insertAfter.

3 Gunakan kaedah penapis

Menggunakan kaedah penapis boleh membantu kami menapis pilihan yang memenuhi syarat tertentu daripada set pilihan, dan kemudian memadam atau menyimpannya. Sebagai contoh, kita boleh menapis mengikut kandungan teks pilihan.

Pelaksanaan khusus adalah seperti berikut:

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

<button>删除选项包含“2”</button>

$('button').click(function(){
  $('#mySelect option').filter(function(){
    return $(this).text().indexOf('2') !== -1;
  }).remove();
});

Kod di atas boleh membantu kami memadamkan semua pilihan yang mengandungi "2" dalam kotak pilihan lungsur turun. Kami mula-mula memilih semua elemen pilihan, kemudian menggunakan kaedah penapis untuk menapis elemen yang memenuhi syarat, dan akhirnya memanggil kaedah alih keluar untuk memadamkannya.

Ringkasan

Menggunakan jQuery untuk memadamkan pilihan dalam kotak pilihan lungsur boleh membantu kami melaraskan kandungan halaman secara dinamik untuk memenuhi keperluan perniagaan yang berbeza. Kami boleh beroperasi melalui kaedah seperti mengalih keluar, menanggalkan dan menapis untuk mencapai pembangunan yang pantas dan cekap.

Perlu diambil perhatian bahawa apabila memadam dan menyimpan pilihan, logik perniagaan yang sepadan perlu dikendalikan dengan teliti untuk mengelakkan kehilangan atau ralat data. Pada masa yang sama, anda juga perlu memberi perhatian kepada isu keserasian untuk memastikan kod tersebut boleh berjalan seperti biasa dalam pelbagai pelayar.

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