我正在尝试使用选择列表获取值，但根本不会调用它。即使有警报也没有追赶意味着有事件没有打电话请让我知道为什么？
@model ApplicationName.Areas.Admin.Models.MenuModel
@{
ViewBag.Title = "Menu Manager";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
string AlternateRow = string.Empty;
string SuccessMessage = string.Empty;
int Counter = 0;
int TotalRecords = 0;
int PageSize = Constant.PageSize;
int CurrPage = Constant.CurrPage;
int PageLimit = Constant.PageLimit;
string [] NumberOfRows = new string[5];
string IsActive = "false";
string IsActiveClass = string.Empty;
string IsActiveTitle = string.Empty;
if (!string.IsNullOrEmpty(Request["mode"]))
{
if (Request["mode"].ToString() == "Add")
{
SuccessMessage = "Menu Added Successfully";
}
else if (Request["mode"].ToString() == "Update")
{
SuccessMessage = "Menu Updated Successfully";
}
else
{
SuccessMessage = string.Empty;
}
}
//Total Count
if(Model.CountMenu != null)
{
TotalRecords = Model.CountMenu;
}
}
<!-- start content-outer -->
<div id="content-outer">
<!-- start content -->
<div id="content">
<div id="page-heading">
<h1>Menu Management</h1>
</div>
@using (Html.BeginForm("Index", "Menu", FormMethod.Post, new { id = "frmmenu", name = "frmmenu" }))
{
@Html.Hidden("TotoalRecs", TotalRecords)
@Html.Hidden("PageSize", PageSize)
@Html.Hidden("CurrPage", CurrPage)
@Html.Hidden("PageLimit", PageLimit)
<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
<tr>
<th rowspan="3" class="sized">
<img src="@Url.Content("~/Content/images/shared/side_shadowleft.jpg")" width="20" height="300" alt="" /></th>
<th class="topleft"></th>
<td id="tbl-border-top"> </td>
<th class="topright"></th>
<th rowspan="3" class="sized">
<img src="@Url.Content("~/Content/images/shared/side_shadowright.jpg")" width="20" height="300" alt="" /></th>
</tr>
<tr>
<td id="tbl-border-left"></td>
<td>
<!-- start content-table-inner ...................................................................... START -->
<div id="content-table-inner">
<!-- start table-content -->
<div id="table-content">
<!-- start message-green -->
<div id="divSuccessMessage">
@if (Model.ListMenuPoco.Count > 0 && !string.IsNullOrEmpty(SuccessMessage))
{
<div id="message-green">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="green-left">@SuccessMessage. <a href="@Url.Action("AddEdit", "Menu")">Add New Menu.</a></td>
<td class="green-right"><a class="close-green">
<img src="@Url.Content("~/Content/images/table/icon_close_green.gif")" alt="" /></a></td>
</tr>
</table>
</div>
}
</div>
<!-- end message-green -->
<!-- start product-table ..................................................................................... -->
<div id="divErrMessage">
@if (Model.ListMenuPoco.Count > 0)
{
<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table">
<tr>
<th class="table-header-check"><a id="toggle-all"></a></th>
<th class="table-header-repeat line-left minwidth-1"><span>Menu Title</span></th>
<th class="table-header-repeat line-left minwidth-1"><span>Order Number</span></th>
<th class="table-header-options line-left"><span>Options</span></th>
</tr>
<tr>
<th colspan="4">
<table border="0" width="100%" cellpadding="0" cellspacing="0" id="divMenuList">
@foreach (var objMenuPoco in Model.ListMenuPoco)
{
Counter++;
if (Counter % 2 == 0)
{
AlternateRow = "alternate-row";
}
else
{
AlternateRow = string.Empty;
}
//set for active/inactive
if (objMenuPoco.IsActive == true)
{
IsActive = "false";
IsActiveClass = "icon-3 info-tooltip";
IsActiveTitle = "Published";
}
else if (objMenuPoco.IsActive == false)
{
IsActive = "true";
IsActiveClass = "icon-4 info-tooltip";
IsActiveTitle = "UnPublished";
}
else
{
IsActive = "false";
IsActiveClass = "icon-4 info-tooltip";
IsActiveTitle = "UnPublished";
}
<tr class="@(AlternateRow)">
<td style="width:3.4%;">
<input type="checkbox" value="@objMenuPoco.MenuId" /></td>
<td style="width:38.8%;">@(objMenuPoco.MenuTitle)</td>
<td style="width:39%;">@(objMenuPoco.OrderNumber)</td>
<td class="options-width">
<a href='@Url.Content("~/Admin/Menu/AddEdit/" + objMenuPoco.MenuId + "")' title="Edit Menu" class="icon-1 info-tooltip"></a>
<a href="javascript:void(0);" onclick="return performdeletemenu('@objMenuPoco.MenuId');" title="Delete Menu" class="icon-2 info-tooltip"></a>
<a href="javascript:void(0);" onclick="return performstatusmenu('@(IsActive)', '@(objMenuPoco.MenuId)');" title="@(IsActiveTitle)" class="@IsActiveClass"></a>
@*<a href="" title="Edit" class="icon-4 info-tooltip"></a>*@
<a href="" title="Edit" class="icon-5 info-tooltip"></a>
</td>
</tr>
}
</table>
</th>
</tr>
</table>
<!-- end product-table................................... -->
}
else
{
<!-- start message-red -->
@Html.Raw(Constant.ErrorMessage);
<!-- end message-red -->
}
</div>
<!-- end content-table -->
<!-- start paging..................................................... -->
<table border="0" cellpadding="0" cellspacing="0" id="paging-table">
<tr>
<td style="width:48%;">
<!-- start actions-box ............................................... -->
<div id="actions-box">
<a href="" class="action-slider"></a>
<div id="actions-box-slider">
<a href="@Url.Action("AddEdit", "Menu")" class="action-edit">Add Menu</a>
<a href="" class="action-edit">Edit</a>
<a href="javascript:void(0);" class="action-delete" onclick="return performalldeletemenu();">Delete All</a>
</div>
<div class="clear"></div>
</div>
<!-- end actions-box........... -->
</td>
<td style="width:42%;">
<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
@*<td style="width:7%;">
<a href="" class="page-far-left"></a>
</td>
<td style="width:7%;">
<a href="" class="page-left"></a>
</td>*@
<td style="width:100%;">
@*<div id="page-info">Page <strong>1</strong> / 15</div>*@
<div id="pager">
</div>
</td>
@*<td style="width:7%;">
<a href="" class="page-right"></a>
</td>*@
@*<td style="width:7%;">
<a href="" class="page-far-right"></a>
</td>*@
</tr>
</table>
</td>
<td style="width:10%;">
@Html.DropDownList(
"selectedValue",
Constant.ArrNumberOfRows.Select(x => new SelectListItem
{
Value = x.ToString(),
Text = x.ToString(),
}),
"Number of rows",
new {
id = "SelectNumRows",
@class = "styledselect_pages"
}
)
</td>
</tr>
</table>
<!-- end paging................ -->
<div class="clear"></div>
</div>
<!-- end content-table-inner ............................................END -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
<th class="sized bottomleft"></th>
<td id="tbl-border-bottom"> </td>
<th class="sized bottomright"></th>
</tr>
</table>
}
<div class="clear"> </div>
</div>
<div class="clear"> </div>
<!-- end content -->
<div class="clear"> </div>
</div>
<!-- end content-outer -->
<script type="text/javascript">
var JsErrorAction = '@Url.Action("Index", "ErrorLog")';
var JsTokenHeaderValue = '@Utils.TokenHeaderValue()';
var JsMethodAction = '@Url.Content("~/api/MenuWebApi/DeleteMenu")';
var JsErrorMessage = '@Html.Raw(Common.Constant.ErrorMessage)';
$(function () {
$('input').checkBox();
$('#toggle-all').click(function () {
$('#toggle-all').toggleClass('toggle-checked');
$('#frmmenu input[type=checkbox]').checkBox('toggle');
return false;
});
});
</script>
<script src="@Url.Content("~/Scripts/admin_menu.js")" type="text/javascript"></script>
=================
_layout
===========================
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Scripts.Render("~/bundles/jquery")
<link href="@Url.Content("~/Content/css/screen.css")" rel="stylesheet" type="text/css" media="screen" title="default" />
<link href="@Url.Content("~/Content/css/style.css")" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="@Url.Content("~/Content/css/pro_dropline_ie.css")" />
<![endif]-->
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.9.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ui.checkbox.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.bind.js")" type="text/javascript"></script>
<![if !IE 7]>
<script src="@Url.Content("~/Scripts/jquery.selectbox-0.5.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.styledselect').selectbox({ inputClass: "selectbox_styled" });
});
</script>
<![endif]>
<script src="@Url.Content("~/Scripts/jquery.selectbox-0.5_style_2.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
$('.styledselect_form_2').selectbox({ inputClass: "styledselect_form_2" });
});
</script>
<script src="@Url.Content("~/Scripts/jquery.selectbox-0.5_style_2.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" });
});
</script>
<script src="@Url.Content("~/Scripts/jquery.filestyle.js")" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$("input.file_1").filestyle({
image: "images/forms/upload_file.gif",
imageheight: 29,
imagewidth: 78,
width: 300
});
});
</script>
<script src="@Url.Content("~/Scripts/custom_jquery.js")" type="text/javascript"></script>
@*<script src="@Url.Content("~/Scripts/jquery.tooltip.js")" type="text/javascript"></script>*@
<script src="@Url.Content("~/Scripts/jquery.dimensions.js")" type="text/javascript"></script>
@*<script type="text/javascript">
$(function () {
$('a.info-tooltip ').tooltip({
track: true,
delay: 0,
fixPNG: true,
showURL: false,
showBody: " - ",
top: -35,
left: 5
});
});
</script> *@
<link href="@Url.Content("~/Content/css/datePicker.css")" type="text/css" />
<script src="@Url.Content("~/Scripts/date.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.datePicker.js")" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function ()
{
$('#date-pick')
.datePicker(
// associate the link with a date picker
{
createButton: false,
startDate: '01/01/2005',
endDate: '31/12/2020'
}
).bind(
// when the link is clicked display the date picker
'click',
function () {
updateSelects($(this).dpGetSelected()[0]);
$(this).dpDisplay();
return false;
}
).bind(
// when a date is selected update the SELECTs
'dateSelected',
function (e, selectedDate, $td, state) {
updateSelects(selectedDate);
}
).bind(
'dpClosed',
function (e, selected) {
updateSelects(selected[0]);
}
);
var updateSelects = function (selectedDate) {
var selectedDate = new Date(selectedDate);
$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
$('#m option[value=' + (selectedDate.getMonth() + 1) + ']').attr('selected', 'selected');
$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}
$('#d, #m, #y')
.bind(
'change',
function () {
var d = new Date(
$('#y').val(),
$('#m').val() - 1,
$('#d').val()
);
$('#date-pick').dpSetSelected(d.asString());
}
);
var today = new Date();
updateSelects(today.getTime());
$('#d').trigger('change');
});
</script>
</head>
<body>
<div>
<!-- Start: page-top-outer -->
<div id="page-top-outer">
<!-- Start: page-top -->
<div id="page-top">
<!-- start logo -->
<div id="logo">
<a href=""><img src="@Url.Content("~/Content/images/shared/logo.png")" width="156" height="40" alt="" /></a>
</div>
<!-- end logo -->
<!-- start top-search -->
<div id="top-search">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" value="Search" onblur="if (this.value=='') { this.value='Search'; }" onfocus="if (this.value=='Search') { this.value=''; }" class="top-search-inp" /></td>
<td>
<select class="styledselect">
<option value="">All</option>
<option value="">Products</option>
<option value="">Categories</option>
<option value="">Clients</option>
<option value="">News</option>
</select>
</td>
<td>
<input type="image" src="@Url.Content("~/Content/images/shared/top_search_btn.gif")" />
</td>
</tr>
</table>
</div>
<!-- end top-search -->
<div class="clear"></div>
</div>
<!-- End: page-top -->
</div>
<!-- End: page-top-outer -->
<div class="clear"> </div>
<!-- start nav-outer-repeat................................................................................................. START -->
<div class="nav-outer-repeat">
<!-- start nav-outer -->
<div class="nav-outer">
<!-- start nav-right -->
<div id="nav-right">
<div class="nav-divider"> </div>
<div class="showhide-account"><img src="@Url.Content("~/Content/images/shared/nav/nav_myaccount.gif")" width="93" height="14" alt="" /></div>
<div class="nav-divider"> </div>
<a href="" id="logout"><img src="@Url.Content("~/Content/images/shared/nav/nav_logout.gif")" width="64" height="14" alt="" /></a>
<div class="clear"> </div>
<!-- start account-content -->
<div class="account-content">
<div class="account-drop-inner">
<a href="" id="acc-settings">Settings</a>
<div class="clear"> </div>
<div class="acc-line"> </div>
<a href="" id="acc-details">Personal details </a>
<div class="clear"> </div>
<div class="acc-line"> </div>
<a href="" id="acc-project">Project details</a>
<div class="clear"> </div>
<div class="acc-line"> </div>
<a href="" id="acc-inbox">Inbox</a>
<div class="clear"> </div>
<div class="acc-line"> </div>
<a href="" id="acc-stats">Statistics</a>
</div>
</div>
<!-- end account-content -->
</div>
<!-- end nav-right -->
<!-- start nav -->
<div class="nav">
<div class="table">
<ul class="select"><li><a href="#nogo"><b>Dashboard</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="current"><li><a href="#nogo"><b>Menu Management</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Page Management</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>User Management</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Build Type</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Qualification</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Email Templates</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>News Letters</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- start nav -->
</div>
<div class="clear"></div>
<!-- start nav-outer -->
</div>
<!-- start nav-outer-repeat................................................... END -->
<!-- start nav-outer-repeat................................................................................................. START -->
<div class="nav-outer-repeat">
<!-- start nav-outer -->
<div class="nav-outer">
<!-- start nav -->
<div class="nav">
<div class="table">
<ul class="select"><li><a href="#nogo"><b>Enquiry Management</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Reported Problem List</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Advertise Management</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- start nav -->
</div>
<div class="clear"></div>
<!-- start nav-outer -->
</div>
<!-- start nav-outer-repeat................................................... END -->
<div class="clear"></div>
@RenderBody()
<div class="clear"> </div>
<!-- start footer -->
<div id="footer">
<!-- start footer-left -->
<div id="footer-left">
Admin Skin © Copyright Internet Dreams Ltd. <a href="">www.netdreams.co.uk</a>. All rights reserved.</div>
<!-- end footer-left -->
<div class="clear"> </div>
</div>
<!-- end footer -->
</div>
</body>
</html>
$(document).ready(function ()
{
$("#SelectNumRows").on('change', function () {
alert('The option with value ' + $(this).val());
});
});
.styledselect_pages {
background: url(../images/table/select_number_rows.gif) left no-repeat;
border: none;
border-left: none;
color: #393939;
cursor: pointer;
display: block;
font-family: Arial;
font-size: 12px;
height: 20px;
line-height: 16px;
margin: 0px 0px 0px 0px;
padding: 4px 0 0 6px;
text-align: left;
width: 130px;
}
等待回应。
此致
答案 0 :(得分：0)
您是否尝试过change活动？
$(document).ready(function ()
{
$("#SelectNumRows").change( function () {
alert('test');
});
});
答案 1 :(得分：0)
<option>元素中的所有<select>元素都具有相同的值：
value=""
因此，当您在下拉列表中选择其他元素时，您将从""更改为""，这显然不会改变任何内容。这就是未触发更改事件的原因。您应该为选项元素分配不同的值。
此外，你应该使用内置助手来生成下拉菜单，避免你在视图中出现的可怕的标签汤：
@Html.DropDownList(
"selectedValue",
Constant.ArrNumberOfRows.Select(x => new SelectListItem
{
Value = x.ToString(),
Text = x.ToString(),
}),
"Number of rows",
new {
id = "SelectNumRows",
@class = "styledselect_pages"
}
)
或者如果您更喜欢标签汤：
<select class="styledselect_pages" id="SelectNumRows" >
<option value="">Number of rows</option>
@{
NumberOfRows = Constant.ArrNumberOfRows;
if (NumberOfRows.Length > 0)
{
for (int i = 0; i < NumberOfRows.Length; i++)
{
<option value="@i">@NumberOfRows[i].ToString()</option>
}
}
}
</select>
请记住，虽然在你的标签汤中，<select>元素没有名称，这意味着如果此元素在表单中，则在提交此表单时，您无法获得服务器上的选定值。
答案 2 :(得分：-1)
试试这个
$(document).ready(function ()
{
$("#SelectNumRows").on('change', function () {
alert('The option with value ' + $(this).children("option:selected").val());
});
});