javascript - 触发onchange事件后，表TH无法正确显示

所以，当我选择员工下拉菜单时，我试图隐藏“公司名称<th>”列。

我有这个jQuery函数，我已经尝试了一段时间，似乎无法正常工作。我尝试使用FF调试器浏览脚本，但没有任何反应，没有错误。我有点迷失了从这里拿走它的途径。

落下

@using (Html.BeginForm())
{
 @Html.DropDownList("SearchStatus", new SelectList(ViewBag.SearchStatusList, "Value", "Text", ViewBag.SelectedItem), new { @class = "form-control",  @onchange = "form.submit();" })
}

jQuery的

<script type="text/javascript">
$("#SearchStatus").on("change", function () {
    if ($("#SearchStatus option:selected").val() == 0) {
        $("#hidden_div").hide();
    } else {
        $("#hidden_div").show();
    }
});

视图

@model PagedList.IPagedList<Login.Models.EditProfile>

@using PagedList.Mvc;


@{
ViewBag.Title = "Pending Accounts";
}

 <link href="~/Content/PagedList.css" rel="stylesheet" />
 <script src="~/Scripts/jquery-1.10.2.js"></script>


<style>
... deleted CSS that was here
</style>


 <h2>Pending Accounts</h2>

@using (Html.BeginForm())
{
 @Html.DropDownList("SearchStatus", new  SelectList(ViewBag.SearchStatusList, "Value", "Text", ViewBag.SelectedItem), new { @class = "form-control",  @onchange = "form.submit();" })
 }
 <br />

  <table class="table grid">
   <tr>
    <th>
        <b>Options</b>
    </th>

    <th>
        First Name:
    </th>
    <th>
        Last Name:
    </th>

    <th>
        Email:
    </th>
    <th>
        Phone Number:
    </th>

    <th id="hidden_div" style="display: none;">
            Company Name:
    </th>
    <th></th>
</tr>

@foreach (var item in Model.ToList())
{
    <tr>
        <td>
            <div class="btn-group">
                <button type="button" id="bootstrap-ok" class="btn btn-default btn-sm icon-success">
                    <span class="glyphicon glyphicon-ok "></span>
                </button>

                <button type="button" id="bootstrap-danger" class="btn btn-default btn-sm icon-danger">
                    <span class="glyphicon glyphicon-remove "></span>
                </button>
            </div>
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EmailAddress)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PhoneNumber)
        </td>
        @if (item.CompanyName != null)
        {
            <td>
                @Html.DisplayFor(ModelItem => item.CompanyName)
            </td>
        }
    </tr>
    }
 </table>

<br />
 Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of          @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("PendingAccounts", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

    @if (Request.IsAuthenticated)
 {
using (Html.BeginForm("Logout", "User", FormMethod.Post, new { id = "logoutForm" }))
{
    <a href="javascript:document.getElementById('logoutForm').submit()">Logout</a>
    }
}

<script type="text/javascript">
$("#SearchStatus").on("change", function () {
    if ($("#SearchStatus option:selected").val() == 0) {
        $("#hidden_div").hide();
    } else {
        $("#hidden_div").show();
    }
});

最佳答案

您可以通过使用$（yourDropdown）.val（）而不选择选项来获取下拉菜单的值。所以试试这个：

$("#SearchStatus").on("change", function () {
    if ($("#SearchStatus").val() == 0) {
        $("#hidden_div").hide();
    } else {
        $("#hidden_div").show();
    }
});