Afficher/masquer une liste déroulante au clic MVC 4

Question

Je suis de cet avis :

<div class="editor-field">Best</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.Best, new List<SelectListItem>
    {
        new SelectListItem { Value = "Best3", Text = "Best 3"},
        new SelectListItem { Value = "Best5", Text = "Best 5"},
        new SelectListItem { Value = "Best10", Text = "Best 10"},
        new SelectListItem { Value = "XBest", Text = "X Best"}
    },
    new { @class = "myselect" })
    @Html.ValidationMessageFor(model => model.Best)
</div> 
<div class="editor-label">X</div>
<div class="editor-field">
    @Html.EditorFor(model => model.X)
    @Html.ValidationMessageFor(model => model.X)
</div>

Et j'ai ce jquery :

$('#Best').on('change', function () {
    if ($(this).val() != "XBest") {
        $('#X').hide(); //invisible
        $('#X').attr('disabled', 'disabled'); // disable
    } else {
        $('#X').show(); //visible
        $('#X').removeAttr('disabled'); // enable
    }
});

Et cela fonctionne, mais lorsque je vais dans cette vue, l'EditorFor X est toujours visible, il ne change que lorsque je commence à cliquer sur les valeurs de la liste déroulante. Ma question est de savoir comment il peut rester caché lorsque j'accède à la vue et ne s'affiche que lorsque je clique.

Answer 1

Vous devez exécuter le change() immédiatement après avoir lié l'événement comme suit.

$('#Best').on('change', function () {
    if ($(this).val() != "XBest") {
        $('#X').hide(); //invisible
        $('#X').attr('disabled', 'disabled'); // disable
    } else {
        $('#X').show(); //visible
        $('#X').removeAttr('disabled'); // enable
    }
}).change(); // auto execute