Bagaimana Menurunkan Populasi Berdasarkan Pemilihan Pengguna?

Mengisi Dropdown Berdasarkan Pemilihan

Apabila membangunkan borang dengan berbilang dropdown, ia boleh memberi manfaat untuk mengisi pilihan dalam satu dropdown berdasarkan pemilihan dibuat di tempat lain. Ini membolehkan pengalaman yang lebih mesra pengguna dengan mengecilkan pilihan dan menjadikan input data lebih cekap.

Satu pendekatan untuk mencapai fungsi ini melibatkan penggunaan JavaScript untuk mengemas kini kandungan dropdown bergantung secara dinamik. Berikut ialah contoh yang menunjukkan cara mengisi satu lungsur turun (B) berdasarkan pemilihan dalam satu lagi (A):

<code class="javascript">function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

Fungsi JavaScript ini mengambil dua parameter, ddl1 dan ddl2, yang mewakili dua lungsur turun. Ia mula-mula memulakan tatasusunan dengan pilihan yang akan dipaparkan dalam setiap lungsur turun.

Seterusnya, pernyataan suis digunakan untuk mengendalikan pemilihan yang dibuat dalam ddl1. Bergantung pada nilai ddl1, ia mengosongkan pilihan dalam ddl2 dan mengisinya dengan pilihan yang sesuai. Fungsi createOption digunakan untuk mencipta dan menambah setiap pilihan pada ddl2.

Dalam HTML, dua dropdown harus ditakrifkan:

<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select></code>

Apabila pengguna memilih pilihan dalam ddl1, perubahan pada peristiwa mencetuskan fungsi configureDropDownLists, yang mengemas kini pilihan dalam ddl2 dengan sewajarnya. Pendekatan ini menyediakan cara yang mudah untuk mengisi satu lungsur turun berdasarkan pemilihan dalam yang lain, meningkatkan kebolehgunaan borang.

Atas ialah kandungan terperinci Bagaimana Menurunkan Populasi Berdasarkan Pemilihan Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!