如何更改 MVC 中 drp 选定更改事件的标签值

Question

我有以下代码，我想根据 selected 角色更改标签文本。

例如，如果我 select Admin 那么在标签文本中我需要 "Admin Name" 等

我使用下面的代码，但我不工作。

 <div class="editor-field">
    @Html.DropDownListFor(model => model.RoleID, new SelectList(ViewBag.RoleLsit, "Id", "RoleName"), "Select Category", new { onchange = "SelectedIndexChanged()" })
</div>

<div>        
    @Html.LabelFor(model => model.RoleName)
    @Html.EditorFor(model => model.RoleName)
    @Html.ValidationMessageFor(model => model.RoleName)
</div>


<script type="text/javascript">

function SelectedIndexChanged() {

    var sub = document.getElementsByName("RoleName");
    sub.value = "Selected Role Name";

}

谢谢

Answer 1

如果您的 js 在您的视图中，您可以使用 @Html.IdFor 找到您的元素。

function SelectedIndexChanged() {
    //find the label
    var label = document.querySelector('label[for="@Html.IdFor(m => m.RoleName)"]');

    //get the dropDown selected option text
    var dropDown = document.getElementById("@Html.IdFor(m => m.RoleId)");
    var selectedText = dropDown.options[dropDown.selectedIndex].text;

    //set the label text
    label.innerHTML=selectedText

}

顺便说一下，看一下 jQuery 可能是 "interesting" 选项。您可以简单地删除 new { onchange = "SelectedIndexChanged()" ，然后

$('#@Html.IdFor(m => m.RoleId)').change(function() {
    $('label[for="@Html.IdFor(m => m.RoleName)"]').text($(this).children('option:selected').text());

});

Answer 2

函数 SelectedIndexChanged() {

document.getElementsById("RoleName").InnerHtml="Role name goes here";

} 您应该使用 id 而不是 name 获取元素，因为当此 html 帮助器呈现强类型绑定属性时，它会成为该控件的 id。所以在你的情况下，角色名称将是 ID

如何更改 MVC 中 drp 选定更改事件的标签值

How to Change label value on drp selected change event in MVC

asp.net-mvc

asp.net-mvc-3

asp.net-mvc-4