Bagaimanakah saya dapat meningkatkan kecekapan senarai dropdown untuk negeri dan bandar?

Strategi Memuatkan Senarai Negeri -To -Down Negeri Negeri dan Bandar

Kaedah memuatkan senarai -drop -down list secara langsung apabila memuatkan pada halaman tidak cekap. Artikel ini akan memperkenalkan amalan yang lebih cekap dan terbaik.

Kaedah yang disyorkan:

<.> 1. Gunakan model paparan:

Buat model paparan, termasuk hartanah StateId, CityID, Statelist, dan CityList. Ini membantu data pakej dan menyediakan jenis yang kuat.

<.> 2. Gunakan JavaScript bukan -in -invasive:

Elakkan menggunakan JavaScript Inner Union dalam tanda. Sebaliknya, JavaScript yang tidak -digunakan untuk memisahkan HTML dan tingkah laku.

pengubahsuaian senarai drop -down:

html:

JavaScript:

Pengoptimuman cache:

<code class="language-html">@Html.DropDownList(m => m.StateID, States, "选择州")  //移除onchange属性
@Html.DropDownListFor(m => m.CityID, Cities, "选择城市") //保留默认ID</code>

Jika berbilang item diberikan, dan pilihan mereka mungkin termasuk bandar -bandar dari keadaan yang sama, cache boleh digunakan untuk mengelakkan panggilan API berulang.

Kaedah Penggantian Ajax Ajax:

<code class="language-javascript">const url = '@Url.Action("GetCities", "Home")'; // 使用助手方法
const citiesDropdown = $('#CityID'); // 缓存元素

$('#StateID').change(function () {
  $.getJSON(url, { id: $(this).val() }, function (response) {
    // 清空并添加默认（null）选项
    citiesDropdown.empty().append($('<option></option>').val('').text('请选择'));

    $.each(response, function (index, item) {
      citiesDropdown.append($('<option></option>').val(item.Value).text(item.Text));
    });
  });
});</code>

Jika bilangan negeri dan bandar adalah terhad, semua bandar boleh diserahkan kepada pandangan dan memberikannya kepada pelbagai JavaScript. Walau bagaimanapun, ini boleh membawa kepada masa yang lama pemuatan awal.

dalam pengawal:

dalam paparan (javascript):

<code class="language-javascript">const cache = {};

$('#StateID').change(function () {
  const selectedState = $(this).val();

  if (cache[selectedState]) {
    // 从缓存中渲染选项
    // ... 使用cache[selectedState]渲染城市下拉列表
  } else {
    $.getJSON(url, { id: selectedState }, function (response) {
      // 添加到缓存
      cache[selectedState] = response;

      // ... 使用response渲染城市下拉列表
    });
  }
});</code>

Atas ialah kandungan terperinci Bagaimanakah saya dapat meningkatkan kecekapan senarai dropdown untuk negeri dan bandar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!