У меня есть функция JS, которая должна изменять innerHTML для td на основе изменения события в DropDownListFor, но работает только при начальной загрузке

Question

У меня есть функция JS, которая должна изменять innerHTML TD, основываясь на значении DropDownListFor. Он работает при начальной загрузке, но не работает, когда раскрывающийся список снова изменяется. У меня также есть вторая функция, которая должна вызывать первую функцию при изменении выпадающего списка ... Вот мой код.

Вид:

<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 (function () {$ ("# helpDescript"). html (GetHelpDescriptionFromddlCommandValue ());});