changer la valeur d'un dropdownList
Bonjour,
J'ai deux DropDownList
Je voudrais que lorsque je fasse un choix dans le premier, le second affiche la valeur adéquate.
le premier est basé sur un sélectlist avec:
ID Aliment
3 Salade
5 Pain
9 Steack
et le second sur:
ID Kcal
3 20
5 111
9 100
Le but étant, si je choisis "pain" (5) que le second m'affiche 111 (5).
si je choisis "Steack" (9) que le second m'affiche 100(9).
Voici mon code:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
<div class="form-group" id="cboAli">
@Html.LabelFor(model => model.AlimentID, "AlimentID", new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("AlimentID", String.Empty)
@Html.ValidationMessageFor(model => model.AlimentID)
</div>
</div>
<div class="form-group" id="cboKcal">
@Html.LabelFor(model => model.Aliment.AlimentKcalPar100, "AlimentID", new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("AlimentKcalPar100", String.Empty)
</div>
</div> |
ensuite j'essaie:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
<script language="javascript" type="text/javascript">
var eAli = document.getElementById('cboAli');
var eKcal = document.getElementById('cboKcal');
var eMyText = document.getElementById('myText');
eAli.addEventListener('change', function (e) {
alert(e.target.value);
eMyText.value = eAli.selectedValue;
eKcal.selectedValue = e.target.value;
alert(eKcal.selectedValue);
}, false);
</script> |
Ce code retrouve bien l'ID de cboAli, il met bien cet ID dans eKcal.selectedValue mais aucun changement n'apparait sur ma page (le deuxième dropdownlist n'affiche rien...
Question subsidiaire, j'arrive donc à retrouver l'id de l'aliment sélectionné dans mon premier dropdownlist, mais en aucun cas je n'arrive à récupérer le texte (Pain, steak ou salade).
Quelqu'un a-il une idée ?
merci d'avance