Liste déroulante liée

Version imprimable

Bonjour à tous,

Voilà, j'ai une difficulté dans mon code.
J'ai réussi à faire des listes déroulantes liées, que je met ensuite dans une base SQL. Ensuite, j'ai un bouton permettant de visionner mon formulaire, mais pour cela, il faut que j'affiche les valeurs affichées, et donc simuler la sélection d'une option dans mon select.

Je réussi à afficher la valeur dans mon premier select, mais pas dans mon deuxième !
Voici pour le moment ce que je fais :

Etablissement.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function () {
    $('#DirectionID').change( function () {
        var URL = $('#EIPForm').data('etablissementListAction');
        $.getJSON(URL + '/' + $('#DirectionID').val(), function (data) {
            var items = '';
            $.each(data, function (i, etablissement) {
                items += "<option value='" + etablissement.Value + "'>" + etablissement.Text + "</option>";
                // state.Value cannot contain ' character. We are OK because state.Value = cnt++;
            });
            $('#EtablissementID').html(items);
        });
    });
});

Direction.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function () {
    var URL = $('#EIPForm').data('directionListAction');
    $.getJSON(URL, function (data) {
        var items = "";
        $.each(data, function (i, direction) {
            if (direction.Value.indexOf("\'") > -1) {
                s = direction.Value + " " + direction.Text;
                alert(s + ": Direction.Value cannot contain \'")
            }
            items += "<option value='" + direction.Value + "'>" + direction.Text + "</option>";
        });
        $('#DirectionID').html(items);
    });
});

Et dans ma vue, je fais çà pour récupérer la bonne valeur dans mon premier select :

Code:

1
2
3
4
5
6
7
8
$(function () {
            $('#test').click(function (event, test) {
 
                var direction = $('#DIRECTION').val()
                $("#DirectionID option[value ='" + direction + "']").attr("selected", "selected");
 
            })
        });

J'ai essayé de faire la même chose pour le deuxième select, mais elle reste toujours vide ! Je voudrais donc qu'il affiche la valeur stockée en base de donnée

PS : les champs DIRECTION et ETABLISSEMENT sont des champs cachés, ce sont eux qui communiquent avec ma BDD.

Merci à tous par avance

J'ai trouvé la solution.
La problème était qu'il fallait que je charge les listes après avoir modifiés les valeurs, pour seulement après refaire la même chose que sur la première liste.

Du coup, par exemple, Etablissement.js devient :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function () {
    $('#DirectionID').change(function () {
        var URL = $('#EIPForm').data('etablissementListAction');
        $.getJSON(URL + '/' + $('#DirectionID').val(), function (data) {
            var items = '';
            $.each(data, function (i, etablissement) {
                items += "<option value='" + etablissement.Value + "'>" + etablissement.Text + "</option>";
            });
            $('#EtablissementID').html(items);
        });
    });
});
 
function LoadEtablissement(etablissement) {
        var URL = $('#EIPForm').data('etablissementListAction');
        $.getJSON(URL + '/' + $('#DirectionID').val(), function (data) {
            var items = '';
            $.each(data, function (i, etablissement) {
                items += "<option value='" + etablissement.Value + "'>" + etablissement.Text + "</option>";
            });
            $('#EtablissementID').html(items);
            $("#EtablissementID option[value ='" + etablissement + "']").attr("selected", "selected");
    });
}

15/08/2012, 16h03
Stephane75000

Bonjour.
Peux-tu stp mettre les vues pour voir mieux la solution ?
Merci.

Code:

1
2
3
4
5
6
7
        <td>
            <select id="DirectionID" style="width:220px"></select>
        </td>
 
        <td colspan="2">
            <select id="EtablissementID" style="width:220px"></select>
        </td>

Avec le JS déjà précisé au dessus et quelques lignes dans mon contrôleur que voici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
public SelectList GetDirectionSelectList()
        {
 
            var directions = db.EIP_PARAM_DIRECTION.ToList();
            return new SelectList(directions.ToArray(),
                                "ID",
                                "LIBELLE");
 
        }
 
        public SelectList GetAxeSelectList()
        {
            var axes = db.EIP_PARAM_AXE.ToList();
            return new SelectList(axes.ToArray(),
                                "ID",
                                "LIBELLE");
        }
 
        public ActionResult AxeList()
        {
            var axes = db.EIP_PARAM_AXE.ToList();
 
            if (HttpContext.Request.IsAjaxRequest())
                return Json(GetAxeSelectList(), JsonRequestBehavior.AllowGet);
 
            return RedirectToAction("Index");
        }
 
        public ActionResult PlanList(string ID)
        {
            string Code = ID;
            var plans = from p in db.EIP_PARAM_PLAN.ToList()
                        where p.ID_AXE.ToString() == Code
                        select p;
 
            if (HttpContext.Request.IsAjaxRequest())
                return Json(new SelectList(
                                plans.ToArray(),
                                "ID",
                                "LIBELLE")
                                , JsonRequestBehavior.AllowGet);
 
            return RedirectToAction("Index");
        }
 
        public ActionResult DirectionList()
        {
            var directions = db.EIP_PARAM_DIRECTION.ToList();
 
            if (HttpContext.Request.IsAjaxRequest())
                return Json(GetDirectionSelectList(), JsonRequestBehavior.AllowGet);
 
            return RedirectToAction("Index");
        }
 
        public ActionResult EtablissementList(string ID)
        {
            string Code = ID;
            var etablissements = from s in db.EIP_PARAM_ETABLISSEMENT.ToList()
                                 where s.ID_DIRECTION.ToString() == Code
                                 select s;
 
            if (HttpContext.Request.IsAjaxRequest())
                return Json(new SelectList(
                                etablissements.ToArray(),
                                "ID",
                                "LIBELLE")
                           , JsonRequestBehavior.AllowGet);
 
            return RedirectToAction("Index");
        }