javascript - MVC Razor 中的 DropBox

Question

我有一个 DropBox，有 4 个选项。这些选项取 self 制作的列表。这是列表和保管箱

 <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)"})

如果我从保管箱中选择一个值，我想使用 JavaScript 函数显示一些文本，但它显示未定义。

<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 元素绑定(bind)一个 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>