javascript - 根据下拉列表中选择的值切换 <div>

Question

 @Html.DropDownList("Category", @Model.Select(item => new SelectListItem
   {
       Value = item.Id.ToString(),
       Text = item.Name.ToString(),
       Selected = "select" == item.Id.ToString()
   }), new { @class = "form-control", id = "dropDownListClient" })

我有这个下拉列表，它是一些c#，但这并不重要。

    @foreach (var a in @ViewBag.Ann)
    {
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h2>@a.Title</h2>
            </div>
            <div class="panel-body">
                <h3>@a.CategoryName</h3>
                <button class="btn btn-info">
                    @Html.ActionLink("Show Details", "ShowDetails", new { id = a.Id })
                </button>
            </div>

        </div>
    }

我想对这个公告列表进行排序。当选择类别时，仅显示该类别的公告。

我不太懂javascript。希望有人能帮助我。

Answer 1

你可以这样做:

$('#dropDownListClient').on('change',function(){
    var category = $(this).val();
    $('.panel-primary').hide();
    $(document).find('#'+category).parents('.panel-primary:first').show();
});