Comment puis-je améliorer l'efficacité du chargement des listes déroulantes pour les États et les villes?

La stratégie de chargement de la liste de drod de l'État -trop de l'État de l'État et de la ville

La méthode de chargement de la liste d'état -Drop -Drop -Down lors du chargement sur la page est inefficace. Cet article présentera des pratiques plus efficaces et les meilleures.

Méthode recommandée:

<.> 1. Utilisez le modèle de vue:

Créez un modèle de vue, y compris les propriétés StateId, CityId, Statelist et CityList. Cela aide les données d'emballage et fournit des types forts.

<.> 2. Utilisez un javascript non invasif:

Évitez d'utiliser le javascript de l'Union intérieur dans la marque. Au lieu de cela, le JavaScript non invasif est utilisé pour séparer le HTML et le comportement.

Drop -Down List Modification:

html:

javascript:

Optimisation du cache:

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

Si plusieurs éléments sont rendus et que leurs options peuvent inclure des villes du même état, le cache peut être utilisé pour éviter les appels d'API répétés.

Méthode de remplacement 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>

Si le nombre d'états et de villes est limité, toutes les villes peuvent être transmises à la vue et les attribuer au tableau JavaScript. Cependant, cela peut entraîner une longue période de chargement initial. dans le contrôleur:

<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>

dans la vue (javascript):

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!