Question

在我看来，我有这个下拉列表：

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，我将其传递给我的视图。

我想根据下拉列表中选择的值更改显示的内容。如果值为“Customer”，我只想显示“m_OrderType”为“Customer”的订单（它是一个字符串）。如果值为“供应商”，则仅显示“供应商”。最后，如果是全部，则显示所有值。

但我不希望通过服务器调用获取另一个列表，我只想知道是否可以使用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&amp;PageCount=1&amp;TotalItemCount=3&amp;PageNumber=1&amp;PageSize=25&amp;HasPreviousPage=False&amp;HasNextPage=False&amp;IsFirstPage=True&amp;IsLastPage=True&amp;FirstItemOnPage=1&amp;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>

Answer 1

在你的视图中试试这个。

@for (int i = 0; i < Model.Count; i++)
{
  <tr class="@className order orderType-@_item[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>
}

添加类order和orderType-(whatever the Model says your OrderType is)，以便jQuery可以轻松访问它。

所以在jQuery中

$('#orderType').change(function () {
    var showOrderType = $(this).val();

    if (showOrderType == "All") {
        //show all tr.order
        $(".order").each(function () {
            $(this).show()
        });
    } else {
        //hide all tr.order
        $(".order").each(function () {
            $(this).hide()
        });
        //show all tr.orderType-(Whatever the user selects)
        $(".orderType-" + showOrderType).each(function () {
            $(this).show()
        });
    }
});

Answer 2

只是一个粗略的例子

var customers = ['CA', 'CB', 'CC', 'CD'],
    suppliers = ['SA', 'SB', 'SC', 'SD']

$('#orderType').on('change', function() {
    var $subType = $('#subType'),
        orderType = this.value; 
    $subType.empty();
    var html = '';
    if(orderType === 'Customer') {
        for(var i =0; i< customers.length ; i++)
            html += '<option>' + customers[i] + '</option>'   ;     
    }
    else if(orderType === 'Supplier') {
         for(var i =0; i< suppliers.length ; i++)
            html += '<option>' + suppliers[i] + '</option>';      
    }
    else{
         for(var i =0; i< customers.length ; i++)
            html += '<option>' + customers[i] + '</option>';
         for(var i =0; i< suppliers.length ; i++)
            html += '<option>' + suppliers[i] + '</option>' ;     
    }
    $subType.append(html);
}).change();

<强> Check Fiddle

使用jQuery和在下拉列表中选择的值更改视图中显示的项目

2 个答案: