Remplissage d'un élément SELECT en utilisant AJAX au chargement de la page et au changement

Question

J'ai un élément SELECT dans un formulaire que je remplis en utilisant AJAX lorsque l'option de sélection change. Cela fonctionne très bien en utilisant le code suivant:

$(function() { 
    function populate() { 
    $.getJSON('/action/' + $(this).val(), {}, function(data, textStatus) { 
     var el = $('select#two'); 
     el.html(''); // empty the select 
     $.each(data, function(idx, jsonData) { 
     el.append($('<option></option>').val(jsonData.id).html(jsonData.name)); 
     }); 
    }); 
    } 

    $("select#one").change(populate); 
}); 

Bien sûr, cela ne fonctionne que lorsque le premier menu déroulant est modifié. Ce que je voudrais faire est d'utiliser la même méthode pour pré-remplir le deuxième menu déroulant lorsque la page est chargée.

La seule façon que je peux penser est de modifier l'appel getJSON comme suit:

$.getJSON('/action/' + $("select#one").val(), {}, function(data, textStatus) 

(ie ne pas utiliser $(this))

puis simplement appeler cela au fond de la ' 'initialiser le bloc' load:

populate(); 

Alors que cela fonctionne, cela ne fonctionne pas. Quelqu'un peut-il suggérer une meilleure solution?

Answer 1

Vous pouvez déclencher l'événement de changement en ajoutant .trigger('change') à votre sélection comme ceci:

$("select#one").change(populate).trigger('change'); 

Answer 2

À mon avis, il est préférable de remplir la première sélectionnez à l'aide du code côté serveur. Le faire avec un appel Ajax peut introduire un intervalle, où la page apparaît mais la boîte de sélection reste vide. Cela peut facilement se produire lorsque la page provient du cache. L'utilisateur sera confus et devra peut-être essayer une fois de plus de voir apparaître les sélections.