Tutorial dengan cekap melaksanakan penukaran kandungan menu drop-down dinamik menggunakan JavaScript

Tutorial ini bertujuan untuk membimbing anda tentang cara menggunakan JavaScript dan ringkas HTML/CSS untuk melaksanakan fungsi penukaran menu drop-down dinamik. Apabila pengguna membuat pemilihan dalam menu drop-down utama, kandungan menu sub-drop-down yang sepadan akan dikemas kini dan dipaparkan dalam masa nyata, sambil memastikan bahawa hanya satu sub-menu yang dipaparkan, dengan itu meningkatkan pengalaman pengguna dan pemeliharaan kod.

Dalam aplikasi web moden, ia adalah keperluan umum untuk memaparkan kandungan yang berbeza secara dinamik berdasarkan pilihan pengguna. Sebagai contoh, dalam bentuk, sub-pilihan yang berbeza dipaparkan bergantung pada kategori yang dipilih oleh pengguna. Pendekatan tradisional mungkin untuk mencipta elemen HTML bebas untuk setiap pilihan, dan kemudian mengawal paparan mereka dan bersembunyi melalui JavaScript. Walau bagaimanapun, apabila bilangan pilihan meningkat, pendekatan ini membawa kepada struktur DOM yang berlebihan dan logik JavaScript menjadi kompleks dan sukar untuk dikekalkan. Tutorial ini akan memperkenalkan penyelesaian yang lebih efisien dan elegan untuk mencapai kandungan menu drop-down yang fleksibel yang beralih melalui elemen letak biasa dan pengurusan data dinamik JavaScript.

Idea Pelaksanaan Teras

Idea teras penyelesaian ini adalah: bukannya mewujudkan elemen HTML yang berasingan untuk setiap submenu yang mungkin, hanya buat elemen pemegang letak generik. Apabila pemilihan dalam menu utama berubah, JavaScript akan mengemas kini label dan pilihan elemen pemegang tempat ini secara dinamik berdasarkan nilai yang dipilih, dan mengawal keadaan paparannya. Pendekatan ini sangat memudahkan struktur HTML dan meningkatkan pemeliharaan kod JavaScript.

Reka bentuk struktur HTML

Pertama, kita perlu menentukan menu dropdown utama dan pemegang tempat generik untuk memaparkan kandungan dinamik.

 <able>
  <tr>
    <td>
      <label> ABC: </label>
      <pilih id="abcid">
        <opsyen nilai="" dilumpuhkan terpilih> pilih-
        <opsyen nilai="a"> a 
        <opsyen nilai="b"> b 
        <opsyen nilai="c"> c 
      </opsyen></opsyen></opsyen></opsyen></pilih>
    </td>
  </tr>
  <tr class="nodisplay">
    <td>
      <label> </label>
      <tection>
        <opsyen nilai="" dilumpuhkan terpilih> pilih-
      
    </opsyen></tection>
</td>
  </tr>
</able>

Penerangan Struktur:

• Menu drop-down utama (#ABCID) : Bertanggungjawab untuk mencetuskan peristiwa penukaran. Nilai = "" Pilihan dilumpuhkan yang dipilih bertindak sebagai prompt lalai untuk mengelakkan pengguna memilihnya.
• Generik Submenu Generik () : Ini adalah pemegang tempat utama.
  • Ia pada mulanya dilengkapi dengan kelas Nodisplay, yang tersembunyi melalui CSS.
  • Mengandungi elemen kosong secara dalaman, yang digunakan untuk memaparkan tajuk submenu secara dinamik.
  • Mengandungi elemen kosong secara dalaman untuk pilihan penduduk yang dinamik. Begitu juga, nilai = "" Dilumpuhkan yang dipilih sebagai prompt lalai.

  Definisi gaya CSS

  Untuk mencapai paparan bersembunyi dan dinamik awal, kami memerlukan kelas CSS yang mudah.

   .Nodisplay {
    Paparan: Tiada;
  }

  Penerangan Gaya:

  • Kelas .Nodisplay menetapkan harta paparan elemen kepada tiada, menjadikannya tidak kelihatan pada halaman dan tidak mengambil ruang.

  Pelaksanaan logik JavaScript

  JavaScript adalah teras penukaran dinamik. Ia bertanggungjawab untuk memantau perubahan dalam menu utama dan mengemas kini kandungan submenu berdasarkan perubahan.

   const
    selectabc = document.QuerySelector ('#abcid'), // Dapatkan menu drop-down utama trselect2 = document.queryselector ('tr.nodisplay'), // dapatkan baris tempat letak label_2 = trselect2.queryselector ('label') elemen menu drop-down dari submenu // tentukan data di bawah situasi pemilihan yang berbeza selcases = {
      A: {label: 'aaa', sels: [{k: '1', v: 'alex'}, {k: '2', v: 'jack'}]},
      B: {label: 'bbb', sels: [{k: 'w', v: 'us'}, {k: 'x', v: 'australia'}, {k: 'y', v: 'india'}}}.
      C: {label: 'ccc', sels: [{k: '$', v: 'blue'}, {k: '£', v: 'green'}, {k: '§', v: 'merah'}}}
    };
  
  // Dengarkan acara perubahan menu drop-down utama selectabc.onchange = e => {
    // Kosongkan semua pilihan dalam menu sub-drop-down, hanya meninggalkan pilihan lalai pertama Select_2.length = 1;
    // Tetapkan semula keadaan yang dipilih menu sub-drop-down ke pilihan lalai pertama Select_2.SelectedIndex = 0;
  
    // Kemas kini teks label submenu berdasarkan nilai pemilihan menu utama // selectabc.value sepadan dengan 'a', 'b', 'c'
    label_2.textContent = selcases [selectabc.value] .label;
  
    /
  
    // Keluarkan kelas nodisplay dan buat submenu yang kelihatan trselect2.classlist.remove ('nodisplay');
  };

  Penjelasan terperinci mengenai kod JavaScript:

  1. Pengambilalihan Elemen Dom :
     • Selectabc: Dapatkan menu drop-down utama dengan ID Abcid.
     • trSelect2: Dapatkan elemen dengan kelas nodisplay, yang merupakan bekas submenu.
     • Label_2: Dapatkan elemen di dalam TRSELECT2.
     • SELECT_2: Dapatkan elemen di dalam TRSELECT2.
     • Struktur Data (Selcases) :
       • Ini adalah objek JavaScript yang digunakan untuk menyimpan data yang sepadan dengan pilihan menu utama yang berbeza ('A', 'B', 'C').
       • Setiap kunci (seperti 'a') sepadan dengan objek, yang mengandungi:
         • Label: Teks tajuk submenu.
         • Sels: Arahan yang mengandungi data pilihan submenu. Setiap pilihan adalah objek {k: 'nilai', v: 'teks'}, k ialah nilai sebenar pilihan (atribut nilai), dan v ialah teks paparan.
       • Struktur ini menjadikan pengurusan data jelas dan mudah diperluaskan.
     • Mendengarkan Acara (selectabc.onchange) :
       • Apabila nilai selectabc berubah, acara onchange dicetuskan dan logik dalam fungsi anak panah dilaksanakan.
     • Logik kemas kini dinamik :
       • select_2.length = 1;: Ini adalah cara yang kemas untuk membersihkan pilihan menu drop-down. Ia akan menetapkan bilangan pilihan dalam menu lungsur ke 1, yang hanya akan menyimpan pilihan pertama (lalai "pilih-") dan mengeluarkan semua pilihan berikutnya.
       • select_2.SelectedIndex = 0;: Memastikan bahawa sub-dropdown ditetapkan semula ke pilihan lalai pertama selepas setiap kemas kini untuk mengelakkan mengekalkan nilai terpilih yang terakhir.
       • Label_2.textContent = selcases [selectabc.value] .label;: Menurut nilai pemilihan semasa (selectabc.value) menu utama, ambil label yang sepadan dari objek Selcases, dan kemas kini teks label submenu.
       • selcases [selectabc.value] .sels.foreach (({k, v}) => select_2.add (pilihan baru (v, k))); Untuk setiap pasangan {k, v}, buat objek pilihan baru (pilihan baru (teks, nilai)) dan tambahkannya ke Select_2.
       • trSelect2.classlist.Remove ('Nodisplay');: Akhirnya, keluarkan kelas nodisplay bekas submenu untuk menjadikannya kelihatan.

     Kelebihan dan pertimbangan

     Kelebihan:

     • Struktur HTML ringkas : Elakkan membuat banyak HTML berulang untuk setiap submenu, dan struktur DOM lebih jelas.
     • Operasi DOM yang cekap : Hanya mengendalikan elemen submenu yang sama dan bukannya berulang kali mencipta dan memusnahkan pelbagai elemen, menghasilkan prestasi yang lebih baik.
     • Mudah untuk mengekalkan dan melanjutkan : Semua data submenu tertumpu dalam objek Selcases JavaScript. Untuk mengubah atau menambah pilihan baru, anda hanya perlu mengemas kini struktur data ini tanpa mengubah HTML.
     • Pengalaman pengguna yang lebih baik : Hanya elemen yang diperlukan diberikan apabila halaman dimuatkan, dan kandungan dinamik dimuatkan atas permintaan.

     Perkara yang perlu diperhatikan:

     • Sumber Data : Dalam aplikasi praktikal, data dalam selcases biasanya akan diperolehi dari API back-end melalui permintaan Ajax, dan bukannya dikodkan keras dalam JavaScript.
     • Negeri Awal : Pastikan submenu tersembunyi apabila halaman beban dan menu utama mempunyai pilihan lalai "Sila pilih".
     • Penyerahan Borang : Jika nilai submenu dinamik ini perlu dikemukakan kepada pelayan, sila pastikan nilai semasa select_2 boleh diperoleh dengan betul apabila borang diserahkan.
     • Kebolehcapaian : Pertimbangkan untuk menambah atribut ARIA yang sesuai dengan kandungan dinamik untuk meningkatkan kebolehcapaian.

     Meringkaskan

     Melalui kaedah yang diperkenalkan dalam tutorial ini, anda boleh menggunakan JavaScript, HTML dan CSS ringkas untuk melaksanakan fungsi pensuisan menu drop-down dinamik yang cekap dan mudah. Mod ini sangat berguna apabila berurusan dengan bentuk dinamik dan antara muka interaktif yang bergantung pada pilihan. Ia bukan sahaja mengoptimumkan struktur kod, tetapi juga meningkatkan pengalaman pengguna. Menguasai teknologi ini akan membantu anda membina aplikasi web yang lebih kuat dan fleksibel.

Atas ialah kandungan terperinci Tutorial dengan cekap melaksanakan penukaran kandungan menu drop-down dinamik menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!