如何刷新頁面下拉列表的變化，使JavaScript的執行

Question

我知道標題是混亂之後，所以我會evplaiin我想要做的事。 我正在使用CodeMirror插件在MVC 5中創建一個語法高亮的文本區域。我有一個可用突出顯示的可用語言範圍的下拉列表。我希望能夠在DDL更改時交換textarea語言。現在，它始終堅持第一語言。繼承人我有什麼到目前爲止： 型號--->

public class CodeSnip 
    { 
     public string Title { get; set; } 
     public string Description { get; set; } 
     public StringBuilder Code { get; set; } 
     public LangType Language { get; set; } 
    } 

    public enum LangType 
    { 
     CSharp,     
     css, 
     HTML, 
     JavaScript, 
     Perl, 
     PHP, 
     Python, 
     Ruby, 
     SQL, 
     VB, 
     XML, 
     Other 
    } 

控制器簡單地調用合適的視圖，在那裏還沒有邏輯。 HTML/RAZOR --->

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

你可以看到DDL，codeDDL，我想火的JavaScript case語句;但正如我所說，它只調用索引0. 有沒有辦法通過更改DDL的選定索引來更改代碼框的語法？

Answer 1

你可以做到這一點是這樣的：

@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; 
     } 
} 

Answer 2

你不需要刷新頁面，只是一個事件處理程序綁定到你的下拉元素和監聽事件「改變」（當用戶選擇下拉列表中的值被解僱），在回調函數add你的代碼。

下面的例子，是想說明委託人：

document.getElementById("codeDDl").addEventListener('change',function(e){ 
 
console.log('your code execute here!'); 
 

 
});

<select id="codeDDl"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>