如何在DropdownList更改后刷新页面，以便执行JavaScript

我知道标题让人困惑，所以我会告诉你我想做什么。 我正在使用这个插件在MVC5中创建一个语法突出显示的文本区域。我有一个下拉列表，其中有一系列可以突出显示的可用语言。我希望能够在DDL更改时切换textarea语言。现在，它总是停留在第一语言上。以下是我到目前为止的情况： 型号-->

控制器只是调用适当的视图，其中还没有逻辑。 HTML/RAZOR-->

@使用AFGCodeBox.Models
@型号AFGCodeBox.Models.CodeSnip
AFG码箱
在这里创造你的风格
@使用（Html.BeginForm（“Create”、“Home”、FormMethod.Post））
{
@Html.TextBoxFor（m=>m.Title，新的{type=“Search”，autofocus=“true”，id=“Title”，placeholder=“Codesnip Title”，style=“width:200px”，@maxlength=“50”}）
@Html.DropDownList（“语言”，
新建SelectList（Enum.GetValues（typeof（LangType）），
“选择语言”，新建{id=“codedll”}）

@text区域（m=>m.Description，新{type=“Search”，autofocus=“true”，id=“Description”，placeholder=“Codesnip Description”，style=“Width:800px”}）

@text区域（m=>m.Code，新的{id=“Code”}）
}
开关（document.getElementById（“codeDDl”）.selectedIndex）{
案例1：
var editor=CodeMirror.fromTextArea（document.getElementById（“代码”）{
行号：对，
是的，
模式：“文本/x-csharp”
});
打破
案例2：
var editor=CodeMirror.fromTextArea（document.getElementById（“代码”）{
行号：对，
是的，
模式：“文本/x-css”
});
打破
案例3：
var editor=CodeMirror.fromTextArea（document.getElementById（“代码”）{
行号：对，
是的，
模式：“文本/x-html”
});
打破
案例4：
var editor=CodeMirror.fromTextArea（document.getElementById（“代码”）{
行号：对，
是的，
模式：“text/x-javascript”
});
打破
}

您可以看到DDL，codedll，我想触发javascript case语句；但就像我说的，它只调用索引0。

---

有没有办法通过更改DDL的选定索引来更改代码框语法？

您不需要刷新页面，只需将事件处理程序绑定到下拉元素，并在回调函数中侦听事件“更改”（当用户从下拉列表中选择值时触发），然后添加代码

下面是一个示例，仅用于说明主体：

document.getElementById（“codeDDl”）.addEventListener（'change'，函数（e）{
log（'您的代码在这里执行！'）；
});

沃尔沃汽车
萨博
梅赛德斯
奥迪
您可以这样做：

 @Html.DropDownList("Language",
    new SelectList(Enum.GetValues(typeof(LangType))),
    "Select Language", 
    new {id="codeDDl", @onchange="changeEditor()"})

function changeEditor(){
 switch(document.getElementById("codeDDl").selectedIndex) {

        case 1:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-csharp"
            });
            break;
        case 2:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-css"
            });
            break;
        case 3:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-html"
            });
            break;
        case 4:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-javascript"
            });
            break;
        }
}

将Javascript onchange事件绑定到下拉列表中。这是可行的，但由于某种原因，当选择更改时会附加一个全新的编辑器控件。可以保留编辑器实例，并且只有更改是模式吗？我没有注意到插件APIs做了同样的事情，附加了一个文本框而不是保留相同的文本框。我的问题可能不清楚。
@using AFGCodeBox.Models
@model AFGCodeBox.Models.CodeSnip

<script src="/Scripts/CodeMirror/codemirror.js"></script>
<script src="/Scripts/CodeMirror/clike.js" type="text/javascript"></script>
<script src="~/Scripts/CodeMirror/css.js"></script>
<script src="~/Scripts/CodeMirror/htmlmixed.js"></script>
<script src="~/Scripts/CodeMirror/javascript.js"></script>
<script src="~/Scripts/CodeMirror/perl.js"></script>
<script src="~/Scripts/CodeMirror/php.js"></script>
<script src="~/Scripts/CodeMirror/python.js"></script>
<script src="~/Scripts/CodeMirror/ruby.js"></script>
<script src="~/Scripts/CodeMirror/sql.js"></script>
<script src="~/Scripts/CodeMirror/vb.js"></script>
<script src="~/Scripts/CodeMirror/xml.js"></script>
<link href="/Content/codemirror.css" rel="stylesheet" type="text/css" />
<link href="/Content/eclipse.css" rel="stylesheet" type="text/css"/>

<div class="jumbotron">
    <h1>AFG Codebox</h1>
    <p class="lead">Create your style here</p>
</div>

@using (Html.BeginForm("Create", "Home", FormMethod.Post))
{
    @Html.TextBoxFor(m => m.Title, new { type = "Search", autofocus = "true", id = "title", placeholder = "Codesnip Title", style = "width: 200px", @maxlength = "50" })
    @Html.DropDownList("Language",
    new SelectList(Enum.GetValues(typeof(LangType))),
    "Select Language", new {id="codeDDl"})
    <p></p>
    @Html.TextAreaFor(m => m.Description, new { type = "Search", autofocus = "true", id = "description", placeholder = "Codesnip Description",style = "Width: 800px" })
    <p></p>
    <div id="CodeBlock">
        @Html.TextAreaFor(m => m.Code, new { id = "code" })
    </div>




}
    <script>

        switch(document.getElementById("codeDDl").selectedIndex) {

        case 1:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-csharp"
            });
            break;
        case 2:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-css"
            });
            break;
        case 3:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-html"
            });
            break;
        case 4:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-javascript"
            });
            break;
        }

    </script>

 @Html.DropDownList("Language",
    new SelectList(Enum.GetValues(typeof(LangType))),
    "Select Language", 
    new {id="codeDDl", @onchange="changeEditor()"})

function changeEditor(){
 switch(document.getElementById("codeDDl").selectedIndex) {

        case 1:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-csharp"
            });
            break;
        case 2:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-css"
            });
            break;
        case 3:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-html"
            });
            break;
        case 4:
            var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                lineNumbers: true,
                matchBrackets: true,
                mode: "text/x-javascript"
            });
            break;
        }
}