0

我有以下代码，一切正常。我有一个下拉列表，并且在下拉列表下方有一个表格列表。我想编写一个 jquery 代码，根据所选的下拉值一次只显示一个表。我的第一种方法是在客户端拥有所有表，并使用 jquery 对它们进行“过滤”，而我的第二种方法是使用对服务器的 ajax 请求并更新表。请看下面的代码。任何帮助将不胜感激 - 谢谢

  <div id="dropDown" class="span11">
    <div class="row-fluid">
        <div class="span4">
            Select Year of Manufacturing
        </div>
        <div class="span8">
            @Html.DropDownListFor(x => x.Products.SingleOrDefault().Year, @productItems)
        </div>
    </div>
    foreach (var item in Model.Products) {
    <h3>@item.Year</h3>
    <div id="dropDownDiv">
        <table class="table table-bordered">
            <tr>
                <th>
                    ProductId
                </th>
                <th>
                    Name
                </th>
                <th>
                    Description
                </th>
                <th>
                    Price
                </th>
                <th>
                    Proposed Price
                </th>
            </tr>
            <tr>
                <td>@item.Id
                </td>
                <td>@item.Name
                </td>
                <td>
                    @item.Description
                </td>
                <td>@item.Price
                </td>
                <td>
                    <input type="number" />
                </td>
            </tr>
        </table>
    </div>
    } 
</div>

对于 Ajax 请求，我正在考虑做这样的事情，但不知道如何进行。

<script>
    //Filter By Year
    $(function () {
        $("select#Year").change(function (evt) {
            if ($("select#Year").val() != "-1") {
                $.ajax({
                    url: "/AjaxDropDown/FilterByYear",
                    type: 'Post',
                    data: { Year: $("select#Year").val() },
                    success: function (data) {  
                                     //Need some code here

                    }
                });
            }
        });
    });

</script>

此外，在某些时候，我想使用 ajax 在此表上启用内联编辑，以便用户可以提交他们的建议价格..谢谢

4

2 回答 2

1 
<script>
//Filter By Year
$(function () {
    $("select#Year").change(function (evt) {
        if ($("select#Year").val() != "-1") {
            $.ajax({
                url: "/AjaxDropDown/FilterByYear",
                type: 'Post',
                data: { Year: $("select#Year").val() },
                success: function (data) {  
                    var records = $.evalJSON(data);
                    var Years= $("select#Year");

                    // clear all previous options 
                    $("select#Year > option").remove();

                     // populate the records
                     for (i = 0; i < records.length; i++) {
                         Years.append($("<option />").val(records[i].Value).text(records[i].Text));
                     }
                }
            });
        }
    });
});
</script>
于 2013-02-12T15:35:11.393 回答
1

首先，我会像这样更新您的标记，以保持 id 的唯一性并添加一种选择 div 的好方法：

<div id="dropDown" class="span11">
    <div class="row-fluid">
        <div class="span4">
            Select Year of Manufacturing
        </div>
        <div class="span8">
            @Html.DropDownListFor(x => x.Products.SingleOrDefault().Year, productItems)
        </div>
    </div>
    foreach (var item in Model.Products) {
    <div id="@string.Format("dropDownDiv_{0}", item.Year)" class="dropDownDiv">
        <h3>@item.Year</h3>
        <table class="table table-bordered">
            <tr>
                <th>
                    ProductId
                </th>
                <th>
                    Name
                </th>
                <th>
                    Description
                </th>
                <th>
                    Price
                </th>
                <th>
                    Proposed Price
                </th>
            </tr>
            <tr>
                <td>@item.Id
                </td>
                <td>@item.Name
                </td>
                <td>
                    @item.Description
                </td>
                <td>@item.Price
                </td>
                <td>
                    <input type="number" />
                </td>
            </tr>
        </table>
    </div>
    } 
</div>

然后如果它们都在页面上，您可以像这样在没有ajax请求的情况下按年份过滤：

$(function () {
    $("#Year").change(function (evt) {
        var year = $("#Year").val();
        // Hide all divs with class dropDownDiv but show the one with the appropriate id
        $('.dropDownDiv').hide().filter('#dropDownDiv_' + year).show();
    });
});

jsfiddle：http: //jsfiddle.net/dg5bZ/6/

于 2013-02-12T15:46:01.803 回答