Discussion :

[Golzinne]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dkmix]

Bonjour
Quelque chose comme ceci ?
Sinon, avec des ids pour chaque option

[Golzinne]

Waouwww, merci pour ta réponse, et une veille de Noël en plus.

Ton post m'a fait aller voir dans mon code source et en fait mon "cboAli" est l'identifiant du

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="form-group" id="cboAli">

alors que mon select s'appelle "AlimentID".

En plus il faut, comme indiquer dans ton post utiliser "selectedIndex" à la place de selectedValue.

ce qui fait que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

eKcal.selectedIndex = AlimentID.selectedIndex;

affiche bien le bon élément de mon dropdownlist.

En plus, cerise sur le gâteau,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

eMyText.value = AlimentID.options[AlimentID.selectedIndex].innerText;

m'affiche bien le nom de l'aliment sélectionné.

Merci