javascript - onchange 事件触发后表 TH 未正确显示

Question

所以我试图隐藏公司名称 <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();
    }
});

Answer 1

您可以通过使用 $(yourDropdown).val() 而不选择选项来获取下拉列表的值。所以试试这个:

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