MVCカミソリのDropBox

Question

私は4つのオプションを持つDropBoxを持っています。オプションは私が作ったリストから取られています。 私はjavascript関数といくつかのテキストを表示するドロップボックスから値を選択した場合、これはリストやDropboxの

<div> 
     @{ 
    List<SelectListItem> listItems= new List<SelectListItem>(); 
    listItems.Add(new SelectListItem 
     { 
      Text = "SearchInputPosition", 
      Value = "1" 
     }); 
    listItems.Add(new SelectListItem 
     { 
      Text = "MissingNumber", 
      Value = "2" 

     }); 
    listItems.Add(new SelectListItem 
     { 
      Text = "ClimbStaircase", 
      Value = "3" 
     }); 

} 
     </div> 

@Html.DropDownListFor(model => model.textProblem, listItems, "-- Select Status --", new { id = "c", @onchange ="changeText(c)"}) 

ですが、それは未定義表示されます。

<script> 
       var data = {   
      "1": "Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missing from the array.", 
      "2": "You are climbing a stair case. It takes n steps to reach to the top.Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top?", 
      "3": "Write a function to delete a node (except the tail) in a singly linked list, given only access to that node.", 
      } 
      function changeText(id) { 
       document.getElementById("content").innerHTML = data[id]; 
       } 
    </script> 
<div id="content"></div> 

私はこれを修正するために何ができますか？

Answer 1

select要素のイベントハンドラをchangeにバインドし、その値を使用できます。

<script> 
     var data = {   
     "1": "Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missing from the array.", 
     "2": "You are climbing a stair case. It takes n steps to reach to the top.Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top?", 
     "3": "Write a function to delete a node (except the tail) in a singly linked list, given only access to that node.", 
     } 
     var select=document.getElementById('textProblem'); 
     select.onchange=function(){ 
      document.getElementById("content").innerHTML = data[this.value]; 
     } 
</script>