更改项目在下拉列表

选择在我看来，我有这样的下拉列表：更改项目在下拉列表

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; } 
}

当我展示它，我创建了一个列出我传递给我的视图的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 [email protected][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>

来源

2013-05-17 hsim

你可以发表你的too..and你想在上面选择元素，只显示客户或者检查是否被点击选择 – bipen

CUTOMER你的意思是你要的对象名单看看我的观点，列表所依据的模型？ – hsim

是的...导致它很难理解你在这里真正想要什么...... – bipen

试试这个，在您的视图。

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

来源

2013-05-17 21:19:48

我会试试看，并告诉你结果。 – hsim

我不得不改变第一行：''，我放了'@ Model'，因为视图使用_item告诉我一个错误 – hsim

部分工作。如果选择了“全部”值，则全部显示，但如果选择“客户”或“供应商”值，则不显示... – hsim

只是粗例子

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

来源

2013-05-17 21:15:10

更改项目在下拉列表

回答

相关问题