Einblenden/Ausblenden auf Klick Dropdownlist MVC 4

Question

Ich habe diese Ansicht:

<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> 

Und ich habe diese 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 
    } 
}); 

Und es funktioniert, aber wenn ich zu dieser Ansicht gehen die EditorFor X ist immer sichtbar, ändert sich nur, wenn ich auf die Werte der Dropdown-Liste klicke. Meine Frage ist, wie kann es beim Zugriff auf die Ansicht verborgen bleiben und nur beim Klicken angezeigt werden.

Answer 1

Sie müssen das Ereignis change() unmittelbar nach dem Binden des Ereignisses wie folgt ausführen.

$('#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