从html.listboxfor获取所选项目而无需在MVC中发布帖子

时间:2013-01-23 21:20:18

标签: c# asp.net-mvc html5

我正在开始使用MVC,但这就是我想要的。

我的一面有一个项目列表,另一面有一个文本框。我想点击列表中的某个项目并让文本框显示该项目的文本,但不是使用按钮或帖子;类似于“OnSelectedIndexChanged”的东西。

这是我到目前为止所做的。

控制器:

public ActionResult Index()
{
    var model = new TestModel();
    model.ListOfItems = new List<SelectListItem>();
    SelectListItem item = new SelectListItem();
    item.Text = "Item's text";
    item.Value = "Value for the list";
    model.ListOfItems.Add(item);
    return View(model);
}

MODEL:

public int[] ItemId { get; set; }
public List<SelectListItem> ListOfItems { get; set; }

查看:

<script type="text/javascript">
function showText() {
    var selectedItem = itemsList.options.selectedIndex;
    txtValue.Text = selectedItem.value;
}
</script>
<h2>Test</h2>

@Html.ListBoxFor(x => x.ItemId, new MultiSelectList(Model.ListOfItems, "Text", "Value", Model.ItemId), new { size = 6, id = "itemsList", OnChange = "showText" })
@Html.TextBox("itemText", "", new { id = "txtItem" })

1 个答案:

答案 0 :(得分:2)

有一些javascript听取列表框上的click事件并获取项目文本并设置为其他文本框的值

$(function(){

  $("#ItemId option").click(function () {
    var _this = $(this);
    $("#txtItem").val($(_this).text());
  });

});

工作样本:http://jsfiddle.net/w4sxw/

假设您已将jQuery加载到页面中。