Bagaimana untuk Mengisi Dropdown Lantas dengan Bandar Berdasarkan Negara Terpilih Menggunakan jQuery?

Mengisi Dropdown Lata dengan JQuery

Masalah:

Anda bertujuan untuk mencipta dinamik borang dengan dua lungsur turun (Negara dan Bandar) menggunakan JQuery, memastikan bahawa hanya bandar yang sepadan dengan negara yang dipilih dipaparkan dalam menu lungsur Bandar.

Kod JavaScript Asal:

Fungsi JavaScript asal, semasa bekerja, menghadapi isu keserasian dalam Internet Explorer. Ia mengisi menu lungsur Bandar secara dinamik berdasarkan negara yang dipilih, bergantung pada tatasusunan berkod keras bagi pilihan bandar.

Pelaksanaan JQuery:

Untuk meningkatkan keserasian dan memudahkan pelaksanaan, JQuery boleh diambil bekerja. Berikut ialah pendekatan yang cekap menggunakan JQuery:

<code class="javascript">jQuery(function ($) {
  var locations = {
    'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
    'Spain': ['Barcelona'],
    'Hungary': ['Pecs'],
    'USA': ['Downers Grove'],
    'Mexico': ['Puebla'],
    'South Africa': ['Midrand'],
    'China': ['Beijing'],
    'Russia': ['St. Petersburg'],
  }

  var $locations = $('#location');
  $('#country').change(function () {
    var country = $(this).val(), lcns = locations[country] || [];

    var html = $.map(lcns, function (lcn) {
      return '<option value="' + lcn + '">' + lcn + '</option>'
    }).join('');
    $locations.html(html)
  });
});</code>

Penjelasan:

• Kami mentakrifkan lokasi objek yang memetakan negara kepada tatasusunan bandar yang sepadan.
• Pengendali acara perubahan untuk lungsur turun Negara mencetuskan populasi lungsur Bandar yang dinamik.
• Pengendali acara mendapatkan negara yang dipilih dan mengambil tatasusunan bandar yang sepadan daripada objek lokasi.
• Satu gelung mencipta elemen pilihan HTML untuk bandar dan menambahkannya pada menu lungsur City menggunakan $locations.html(html).

Demo:

Anda boleh rujuk pautan Fiddle yang disediakan untuk demo yang berfungsi.

Pelaksanaan JQuery ini ringkas, serasi merentas penyemak imbas dan memudahkan populasi dinamik dropdown berlatarkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Dropdown Lantas dengan Bandar Berdasarkan Negara Terpilih Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!