Remplir dynamiquement une liste déroulante en fonction de la sélection d'une autre liste déroulante

John Schultz

Je dois être en mesure de remplir une DropDownList en fonction de la sélection d'une DropDownList précédente.

J'ai remarqué qu'il y avait beaucoup de sujets similaires sur SO, malheureusement, je dois le faire sans utiliser un appel AJAX et doit être fait dans MVC5 sans faire de publication (si possible).

  1. Est-ce seulement possible?
  2. Par où je commence? Y a-t-il des exemples sur lesquels je peux partir?
Alex Art.

En fait, il est possible de le faire sans AJAX mais il faudrait quand même du Javascript:

Les premier et deuxième menus déroulants devraient avoir toutes les options disponibles prerenderd. Pour chaque option de la deuxième liste déroulante, spécifiez pour quelle valeur de la première liste déroulante l'option doit être visible. Par example:

<select id="firstDd">
   <option value="car">Cars</option>
   <option value="plane">Planes</option>
</select >


<select id="secondDd">
   <option value="ferrari" data-display-on="car">Ferrari</option>
   <option value="bugatti" data-display-on="car">Bugatti</option>
   <option value="747" data-display-on="plane">Boeing 747</option>
   <option value="757" data-display-on="plane">Boeing 757</option>
</select >

Maintenant, avec du javascript simple, vous pouvez activer la visibilité des deuxièmes options de liste déroulante en fonction de la valeur de la première:

$('#firstDd').change(function(){
  var value = $(this).val();
  if(value)
  {
    var $secondDd = $('#secondDd');
    var $selectedOption = $('option:selected', $(this));
    $('option', $secondDd).hide();
    $('option[data-display-on="'+value+'"]',$secondDd).show();    
  }
  $($secondDd).val(null);
})

$('#firstDd').change();

Voici le travail JSFiDDLE qui démontre cette approche

Articles connexes