MVC3：通过Javascript获取下拉菜单选择的值/文本

Posted 2023-03-06

【中文标题】MVC3：通过Javascript获取下拉菜单选择的值/文本

【英文标题】：MVC3: Get Drop down menu selected value/text via Javascript

【发布时间】：2012-11-30 07:24:41

【问题描述】：

在 MVC3 上，下拉列表定义为

@html.dropDownList(m=>m.model, new SelectList(m.myList, "value", "text"))

如何通过 javascript 获取选定的值和/或文本？

我尝试传递一个名字：

  @Html.dropDownList(m=>m.model, new SelectList(m.myList, "value", "text"), new name="name")

并从 javascript 中读取名称： document.getElementByName("name")

但这不起作用。

【参考方案1】：

如果您使用的是 jQuery（这很可能与 MVC 项目一起使用）：

// lambda to get the ID of your dropdown. This runs on the server,
// and injects the ID into a client-side variable.
var id = '@Html.IdFor( o => o.model )';

// get the dropdown by ID and wrap in a jQuery object for easy manipulation
var dropdown = $("#" + id);

// get the value
var value = dropdown.val();

当然，如果需要，您可以将其组合成一行。

如果您不使用 jQuery，请参阅 https://***.com/a/1085810/453277。

var id = '@Html.IdFor( o => o.model )';
var dropdown = document.getElementById( id );
var value = dropdown.options[dropdown.selectedIndex].value;

手册 ID：

@Html.dropDownList(m=>m.model, new SelectList(m.myList, "value", "text"), new id = "ddl1")

var value = $("#ddl1").val();

【讨论】：

我的视图中有几个下拉菜单。我将如何在脚本中区分它们？

您应该使用 ID 来区分。通常您可以从Html.IdFor() 自动获取此 ID，但您也可以手动添加 ID。我将添加一个示例。

非常感谢。那行得通。为了获得选定的值，我做了 var value = $("#ddl1 option:selected").val();

只要 var value = $("#ddl1").val() 就会得到当前选中的项。无需添加选项：已选择。