MVC2 中的 Html.DropdownList 帮助器中的 Javascript 不会触发

Question

谁能告诉我为什么在下面的场景中单击按钮时 JavaScript 不会提交？

控制器如下：

public ActionResult TestJavaScrip()
 {
         TestEntities db = new Models.TestEntities();

         ViewData["SortOptions"] = new SelectList(db.aspnet_Role, "RoleId", "RoleName");

 return View();
 }

视图包含：

<form>
<%= Html.DropDownList("mySelect",(SelectList)ViewData["SortOptions"],"Please Choose a Role...") %> 
<input type="button" onclick="getIndex()" value="Alert index of selected option"/>
</form>     

Site.master head 部分中的 Javascript 如下：

<script type="text/javascript">
function getIndex() {
    var x = document.getElementById("mySelect");
    alert(x.selectedIndex);
}
</script>

渲染如下：

<form>
<select id="mySelect" name="mySelect"><option value="">mySelect</option>
<option value="133d8e56-XXXX-XXXX-XXXX-35ee34e845aa">Administrator</option>
<option value="7c2a6ed5-XXXX-XXXX-XXXX-fecb42bdeebe">Clerk</option>
<option value="54ebe31d-XXXX-XXXX-XXXX-9821df62f5ed">Client</option>
<option value="63e605eb-XXXX-XXXX-XXXX-b007189a41e5">CPA</option>
<option value="fb644c83-XXXX-XXXX-XXXX-5da4b2dc64a0">Executive</option>
<option value="65efa138-XXXX-XXXX-XXXX-098d9195a99d">Master Administrator</option>
<option value="0c863774-XXXX-XXXX-XXXX-6c8d2418ca6b">Part Qualified Accountant</option>
</select>


<input type="button" onclick="getIndex()" value="Alert index of selected option"/>
</form>

为什么它不触发？我希望有人能看到我的明显疏忽。

Answer 1

由于您使用 MVC 2，我假设您可以访问它附带的 JQuery 库。

这里有一些 JQuery 可以解决您的问题，还有 jsfiddle 这样您就可以看到它的实际效果！

你会发现 jsfiddle 是这类事情的救星，如果你想要一个直接的 javascript 解决方案，你也可以在那里添加一个。

<input type="button" id="btn" value="Alert index of selected option"/>

$(document).ready(function(){
    $('#btn').click(function getIndex() { 
    var x = document.getElementById("mySelect"); 
    alert(x.selectedIndex); 
    });
});