javascript - 我有一个 JS 函数，它应该根据 DropDownListFor 中的事件更改来更改 td 的innerHTML，但仅适用于初始加载

Question

我有一个 JS 函数，它应该根据 DropDownListFor 的值更改 TD 的innerHTML。它在初始加载时起作用，但当下拉列表再次更改时不起作用。我还有第二个函数，当下拉列表更改时，它应该调用第一个函数...这是我的代码。

查看:

<div class="row">
    <div class="col-md-12" style="overflow-y:scroll">
        <table class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th>Terminal</th>
                    <th>Command</th>
                    <th>Command Value</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>@Html.DropDownListFor(o => o.TerminalsDDL, Model.TerminalsDDL, new { id = "ddlTerminalID", @class = "form-control" })</td>
                    <td>@Html.DropDownListFor(o => o.TerminalCommandLookupsDDL, Model.TerminalCommandLookupsDDL, new {id = "ddlCommandValue", @class = "form-control" })</td>
                    <td>@Html.TextBoxFor(o => o.UserEnteredTerminalCommands, new { Class = "form-control", Id = "cmdValueValue"})</td>
                    <td> <input id="btnSaveTerminalCommand" type="button"  value="Insert" class="btn btn-primary" /> </td>
                </tr>
                <tr>
                    <td colspan="4" id="helpDescript" onchange="UpdateHelpDescript();">@*@Html.DisplayFor(model => model.HelpDescription)*@</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

JS函数:

 function GetHelpDescriptionFromddlCommandValue() {

    var hd = document.getElementById("helpDescript");
    //var strUser = e.options[e.selectedIndex].text;
    var cmdID = document.getElementById("ddlCommandValue");

    var cmd = cmdID.options[cmdID.selectedIndex].text;

    if (cmd == "UpdateConfig") {
        var helpDescript = "No current help description.";
    }
    if (cmd == "PushLogsToS3") {
        var helpDescript = "No current help description.";
    }
    if (cmd == "PushRecentLogsToS3") {
        var helpDescript = "Command Value is the number of days you wish to retreive.";
    }
    if (cmd == "UnlockCard") {
        var helpDescript = "No current help description.";
    }
    if (cmd == "GetWorkingKey") {
        var helpDescript = "No current help description.";
    }
    if (cmd == "GetNewBuild") {
        var helpDescript = "Pre-Approved S3 URL";
    }
    if (cmd == "ExitApp") {
        var helpDescript = "No current help description."
    }

    return helpDescript;
}

document.getElementById("helpDescript").innerHTML = GetHelpDescriptionFromddlCommandValue();

function UpdateHelpDescript() {
    document.getElementById("helpDescript").innerHTML = GetHelpDescriptionFromddlCommandValue();

}

有人可以解释一下为什么第二个功能在更改时不起作用吗？谢谢!

Answer 1

1. 将 OnChange 事件放入下拉元素中。

2. 使用不显眼的 Js(将 js 与 html 分开)。
   例如:

   $(文档).ready(函数(){ $("#helpDescript").html(GetHelpDescriptionFromddlCommandValue()); });