Javascript melaksanakan pelbagai pilihan wilayah dan bandar

Dengan perkembangan pesat zaman maklumat, Internet telah menjadi bahagian yang amat diperlukan dalam kehidupan kita. Ia telah menjadi satu tabiat yang perlu untuk orang ramai menggunakan Internet melalui komputer, telefon bimbit dan peranti lain dalam kehidupan seharian mereka. Dalam reka bentuk web, fungsi pelbagai pilihan wilayah dan bandar sering terlibat, yang memerlukan kami menggunakan JavaScript untuk melaksanakannya.

1. Idea Pelaksanaan

Dalam proses merealisasikan fungsi berbilang pilihan wilayah dan bandar, kita perlu menggunakan berbilang menu lungsur turun setiap menu lungsur wilayah, antaranya menu lungsur peringkat atas Untuk memilih wilayah, pilihan dalam menu lungsur ialah nama wilayah apabila pengguna memilih wilayah, menu lungsur berikut akan dijana secara dinamik untuk dipaparkan semua kawasan bandar di wilayah, dan nama bandar ialah pilihan dalam menu lungsur turun apabila pengguna memilih wilayah Selepas bandar dipilih, menu lungsur di bawah akan dijana semula untuk memaparkan semua daerah dalam bandar, dan nama daerah ialah pilihan dalam menu lungsur.

Untuk melaksanakan fungsi ini, kami boleh menggunakan beberapa perpustakaan JavaScript untuk meningkatkan kecekapan pengekodan, seperti jQuery dan perpustakaan lain.

2. Kaedah pelaksanaan

1. Struktur komponen

Sebelum melaksanakan fungsi ini, kita perlu membina struktur komponen terlebih dahulu. Struktur komponen mungkin berbeza mengikut keperluan sebenar Di sini kami menggunakan cara yang lebih biasa untuk melaksanakannya, seperti yang ditunjukkan di bawah:

<div>
  <select id="province">
    <option value="">请选择省份</option>
  </select>

  <select id="city">
    <option value="">请选择城市</option>
  </select>

  <select id="district">
    <option value="">请选择区域</option>
  </select>
</div>

Dalam struktur komponen ini, kami mula-mula mentakrifkan tiga komponen menu lungsur , sepadan dengan ". wilayah", "bandar" dan "wilayah" masing-masing. Di sini kami menetapkan atribut id untuk mereka masing-masing untuk memudahkan operasi seterusnya.

2. Data wilayah

Sebelum melaksanakan fungsi pilihan berbilang wilayah, kita perlu menyediakan data wilayah terlebih dahulu, iaitu menyimpan semua nama wilayah dalam tatasusunan, supaya apabila membuat persembahan Hanya apabila terdapat menu lungsur wilayah boleh pengguna membuat pilihan. Untuk kemudahan Javascript melaksanakan pelbagai pilihan wilayah dan bandarnstrasi, di sini kami mentakrifkan secara langsung tatasusunan untuk menyimpan data wilayah.

var provinceArray = [
  {"name": "北京市", "value": "110000"},
  {"name": "天津市", "value": "120000"},
  {"name": "河北省", "value": "130000"},
  ……
];

Dalam kod di atas, kami mentakrifkan tatasusunan wilayah, yang mengandungi semua wilayah dan nilai nilainya Nilai nilai ini digunakan untuk membezakan setiap wilayah.

3. Memberikan menu lungsur wilayah

Selepas kami mempunyai data wilayah, kami kemudiannya perlu memaparkan menu lungsur wilayah melalui kod JavaScript. Kita boleh mencapai operasi ini melalui perpustakaan seperti jQuery.

function renderProvince() {
  var html = '<option value="">请选择省份</option>';
  for (var i = 0; i < provinceArray.length; i++) {
    html += '<option value="' + provinceArray[i].value + '">' + provinceArray[i].name + '</option>';
  }
  $('#province').html(html);
}

Dengan coretan kod di atas, kami boleh memaparkan data wilayah ke dalam menu lungsur wilayah. Di sini kami menggunakan gelung for untuk merentasi, dan kemudian memasukkan hasil traversal ke dalam menu lungsur wilayah dalam bentuk teg

4. Menu lungsur turun bandar Render

Apabila pengguna memilih wilayah, kami perlu menjana semua bandar di wilayah secara dinamik berdasarkan wilayah yang dipilih pada masa ini. Melaksanakan operasi ini juga memerlukan penggunaan perpustakaan seperti jQuery. Pelaksanaan operasi ini perlu dibahagikan kepada dua langkah: langkah pertama ialah mendapatkan wilayah yang dipilih pada masa ini ialah menjana menu lungsur bandar secara dinamik berdasarkan maklumat wilayah. Operasi khusus adalah seperti berikut:

function renderCity(provinceValue) {
  var cityArray = [
    {"name": "城市1", "value": "110100"},
    {"name": "城市2", "value": "110200"},
    {"name": "城市3", "value": "110300"},
    ……
  ];

  var html = '<option value="">请选择城市</option>';
  for (var i = 0; i < cityArray.length; i++) {
    if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) {
      html += '<option value="' + cityArray[i].value + '">' + cityArray[i].name + '</option>';
    }
  }
  $('#city').html(html);
}

Dalam coretan kod ini, kami mula-mula mentakrifkan data bandar, yang merangkumi semua bandar dan nilai nilainya. Kemudian semasa proses merentasi data bandar, kami menggunakan pernyataan if untuk menentukan sama ada item yang dilalui semasa adalah milik wilayah yang dipilih pada masa ini. Jika ya, ia akan dipaparkan ke dalam menu lungsur bandar.

5. Memberikan menu lungsur daerah dan daerah

Selepas mendapatkan bandar yang dipilih oleh pengguna, kami perlu menjana secara dinamik semua daerah dan daerah di bandar berdasarkan bandar yang dipilih pada masa ini. Kod untuk melaksanakan operasi ini adalah seperti berikut:

function renderDistrict(cityValue) {
  var districtArray = [
    {"name": "区县1", "value": "110101"},
    {"name": "区县2", "value": "110102"},
    {"name": "区县3", "value": "110103"},
    ……
  ];

  var html = '<option value="">请选择区域</option>';
  for (var i = 0; i < districtArray.length; i++) {
    if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) {
      html += '<option value="' + districtArray[i].value + '">' + districtArray[i].name + '</option>';
    }
  }
  $('#district').html(html);
}

Dalam segmen kod ini, kami mula-mula mentakrifkan data daerah dan daerah, yang merangkumi semua daerah dan daerah serta nilai nilainya. Kemudian semasa proses merentasi data daerah dan daerah, pernyataan if juga digunakan untuk menentukan sama ada item yang dilalui semasa adalah milik bandar yang dipilih pada masa ini. Jika ya, ia diberikan kepada menu lungsur daerah dan daerah.

6. Ringkasan kod

Mengintegrasikan kod di atas bersama-sama, kami boleh merealisasikan pelbagai pilihan wilayah dan bandar Kod lengkapnya adalah seperti berikut:

var provinceArray = [
  {"name": "北京市", "value": "110000"},
  {"name": "天津市", "value": "120000"},
  {"name": "河北省", "value": "130000"},
  ……
];

function renderProvince() {
  var html = '<option value="">请选择省份</option>';
  for (var i = 0; i < provinceArray.length; i++) {
    html += '<option value="' + provinceArray[i].value + '">' + provinceArray[i].name + '</option>';
  }
  $('#province').html(html);
}

function renderCity(provinceValue) {
  var cityArray = [
    {"name": "城市1", "value": "110100"},
    {"name": "城市2", "value": "110200"},
    {"name": "城市3", "value": "110300"},
    ……
  ];

  var html = '<option value="">请选择城市</option>';
  for (var i = 0; i < cityArray.length; i++) {
    if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) {
      html += '<option value="' + cityArray[i].value + '">' + cityArray[i].name + '</option>';
    }
  }
  $('#city').html(html);
}

function renderDistrict(cityValue) {
  var districtArray = [
    {"name": "区县1", "value": "110101"},
    {"name": "区县2", "value": "110102"},
    {"name": "区县3", "value": "110103"},
    ……
  ];

  var html = '<option value="">请选择区域</option>';
  for (var i = 0; i < districtArray.length; i++) {
    if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) {
      html += '<option value="' + districtArray[i].value + '">' + districtArray[i].name + '</option>';
    }
  }
  $('#district').html(html);
}

renderProvince();

$('#province').change(function () {
  var provinceValue = $(this).val();
  renderCity(provinceValue);
  renderDistrict('');
});

$('#city').change(function () {
  var cityValue = $(this).val();
  renderDistrict(cityValue);
});

Tiga , Kesan pelaksanaan

Melalui pelaksanaan kod di atas, kita boleh mendapatkan contoh lengkap pelbagai pilihan wilayah dan bandar, seperti yang ditunjukkan dalam rajah di bawah:

Pada ketika ini, Kami telah menyelesaikan pelaksanaan fungsi berbilang pilihan wilayah dan bandar.

Secara umumnya, tidak sukar untuk melaksanakan fungsi berbilang pilihan wilayah dan bandar Ia hanya memerlukan beberapa operasi kod mudah untuk melaksanakan fungsi ini. Dalam projek sebenar, kami hanya perlu melaraskan struktur kod mengikut keperluan khusus untuk mencapai fungsi berbilang pilihan yang lebih kompleks dan kaya untuk wilayah dan bandar.

Atas ialah kandungan terperinci Javascript melaksanakan pelbagai pilihan wilayah dan bandar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!