控制层(初始化数据)
/// <summary>
/// Inti DropdownList Data
/// </summary>
/// <returns></returns>
public ActionResult CreateData()
{
List<SelectListItem> selectItem = new List<SelectListItem>() {
new SelectListItem(){Selected=true,Text="北京",Value="1"},
new SelectListItem(){Selected=false,Text="天津",Value="2"},
new SelectListItem(){Selected=false,Text="南京",Value="3"},
new SelectListItem(){Selected=false,Text="湖北",Value="4"},
new SelectListItem(){Selected=false,Text="湖南",Value="5"},
new SelectListItem(){Selected=false,Text="沈阳",Value="6"},
new SelectListItem(){Selected=false,Text="长春",Value="7"},
new SelectListItem(){Selected=false,Text="大连",Value="8"},
new SelectListItem(){Selected=false,Text="深圳",Value="9"},
new SelectListItem(){Selected=false,Text="上海",Value="10"},
};
ViewData["city"] = selectItem;
return View();
}
视图层
@Html.DropDownList("city") //当前的city来自于控制层中存于ViewData中
<input type="button" id="GetSelectedItem" value="SelectIten"/>
JS操作(获取当前选中项的文本,并显示选中的值)
$(function () {
$("#GetSelectedItem").click(function () {
var selectedItem = $("#city").val();
alert("你选中的值是:" + selectedItem);
//获取到所有的节点
var options = document.getElementsByTagName("option");
//遍历所有的节点
for (var i = 0 ; i < options.length;i++)
{
if (options[i].selected) {
alert("你选中的文本是:" + options[i].text);
}
}
});
})
备注:使用DropDownList来显示下拉数据,案例当中使用的数据是静态数据。