在我看来,我有这个下拉列表:
Filter by: <select name="orderType" id="orderType">
<option value="All">All</option>
<option value="Customer">Customer</option>
<option value="Supplier">Supplier</option>
</select>
这是我的模型:
public class m_OrderInfo
{
public int m_OrderID { get; set; }
public string m_OrderName { get; set; }
public string m_OrderType { get; set; }
public DateTime m_OrderDate { get; set; }
}
当我显示它时,我创建了一个传递给我的视图的 List listObjsToDisplay。
我想根据下拉列表中选择的值更改显示的内容。如果值为“客户”,我只想显示“m_OrderType”为“客户”的订单(它是一个字符串)。如果值为“供应商”,则仅显示“供应商”。最后,如果是全部,则显示所有值。
但我不想通过服务器调用获取另一个列表,我只想知道是否可以使用 jQuery 更改视图中显示的列表。
编辑
经过一些工作和良好的建议,我正在进步,但仍然需要帮助。
这是我现在的看法:
@using System.Globalization
@model List<MyApp.Models.OrderInfo>
<h2>
Display Orders
</h2>
<script type="text/javascript" src="/Scripts/Functional/Inventory.js"></script>
@using (Html.BeginForm())
{
<p>
Filter by: <select name="orderType" id="orderType">
<option value="All">All</option>
<option value="Customer Order">Customer Order</option>
<option value="Supplier Order">Supplier Order</option>
</select><br/>
</p>
}
@if (Model.Count > 0)
{
<table>
<tr>
<th>Order ID<th>
<th>Order Name</th>
<th>Order Type</th>
<th>Order Date</th>
</tr>
@for (int i = 0; i < Model.Count; i++)
{
<tr class="@className order orderType-@Model[i].m_OrderType">
<td>@Html.DisplayFor(_item => _item[i].m_OrderID)</td>
<td>@Html.DisplayFor(_item => _item[i].m_OrderName)</td>
<td>@Html.DisplayFor(_item => _item[i].m_OrderType)</td>
<td>@Html.DisplayFor(_item => _item[i].m_OrderDate)</td>
</tr>
}
</table>
}
这是我的 jQuery 脚本:
$('#orderType').change(function () {
var showOrderType = $(this).val();
if (showOrderType == "All") {
alert("all is selected");
$(".order").each(function() {
$(this).show();
});
alert("All are shown.");
} else {
alert("else condition struck");
$(".order").each(function() {
$(this).hide();
});
alert("all is hidden");
$(".orderType-" + showOrderType).each(function () {
alert("Code goes in here?");
$(this).show();
});
alert("Code is done.");
}
});
该脚本部分工作,因为它成功地进行了隐藏和显示,但它从未到达该alert("Code goes in here")
行,所以我对它为什么不起作用有点无能为力。
这是一个html代码示例:
<h2>
Display Suppliers Orders
</h2>
<script type="text/javascript" src="/Scripts/Functional/magicAdmin.Inventory.js"></script>
<form action="/SupplierOrders/DisplaySuppliersOrders?Count=3&PageCount=1&TotalItemCount=3&PageNumber=1&PageSize=25&HasPreviousPage=False&HasNextPage=False&IsFirstPage=True&IsLastPage=True&FirstItemOnPage=1&LastItemOnPage=3" method="post"> <p>
Filter by: <select name="orderType" id="orderType">
<option value="All">All</option>
<option value="Customer Order">Customer Order</option>
<option value="Supplier Order">Supplier Order</option>
</select><br/>
</p>
</form>
<table class="orderTable">
<tr>
<th>Order ID</th>
<th>Order Name</th>
<th>Order Type</th>
<th>Order Date</th>
</tr>
<tr class="even order orderType-Supplier Order">
<td>1</td>
<td>Box #1</td>
<td>Supplier</td>
<td>06-01-2012</td>
</tr>
<tr class="odd order orderType-Supplier Order">
<td>2</td>
<td>Box #2</td>
<td>Supplier Order</td>
<td>06-01-2012</td>
</tr>
<tr class="even order orderType-Supplier Order">
<td>3</td>
<td>Box #3</td>
<td>Supplier Order</td>
<td>01-01-0001</td>
</tr>
</table>