Question

这是我使用for循环生成的用户列表，其中包含所有保存按钮的相同ID和功能。按钮隐藏＆amp; show只在第一行工作。

@foreach (var usr in (List<RegistrationResponsive.Models.RegistrationModels>)ViewData["UsersList"])
{
    <td>
        @{
            List<SelectListItem> listItems = new List<SelectListItem>();
            listItems.Add(new SelectListItem
                         {
                             Text = "Active",
                             Value = "Active"
                         });
            listItems.Add(new SelectListItem
                         {
                             Text = "In Active",
                             Value = "InActive"
                         });
        }

        @Html.DropDownListFor(a => @usr.Status, listItems, new { @class = "form-control", @autocomplete = "OFF", @id = "drpDwn", onchange = "MyFunction()" })
        <td id="btn" style="display:none">
            <button type="submit" style="float:right" onclick="Save('@usr.ID')" ng-hide="false" class="btn btn-primary active pull-right">Save</button>
        <td>
        </td>
   </tr>
}

这是我用来显示/隐藏按钮的JS函数：

function MyFunction() {
    if ($('#drpDwn').val() == "Active") {
        $('#btn').hide();
    }
    else {
        $('#btn').show();
    }
}

生成的代码如下所示：

<form>
    <div class="table-responsive container">
        <table id="myTable" class="table table-striped webgrid-table">
            <thead>
                <th>Name</th>
                <th>Phone No.</th>
                <th>Country&nbsp;Name</th>
                <th>Gender</th>
                <th>Action</th>
            </thead>
            <tr>
                <td>
                    Sanju
                </td>
                <td>
                    +91XXXXXXXXXX
                </td>
                <td>
                    India
                </td>
                <td>
                    Female
                </td>
                <td>


                    <select autocomplete="OFF" class="form-control" id="drpDwn" name="usr.Status" onchange="MyFunction()"><option value="Active">Active</option>
<option value="InActive">In Active</option>
</select>
                <td id="btn" style="display:none">
                    <button type="submit" style="float:right" onclick="Save('5sYRctjnzg')" ng-hide="false" class="btn btn-primary active pull-right">Save</button>
                <td></td>
            </tr>
            <tr>
                <td>
                    Satheesh
                </td>
                <td>
                    +91XXXXXXXXXX
                </td>
                <td>
                    India
                </td>
                <td>
                    Male
                </td>
                <td>


                    <select autocomplete="OFF" class="form-control" id="drpDwn" name="usr.Status" onchange="MyFunction()"><option value="Active">Active</option>
<option value="InActive">In Active</option>
</select>
                <td id="btn" style="display:none">
                    <button type="submit" style="float:right" onclick="Save('u421Z4VIyV')" ng-hide="false" class="btn btn-primary active pull-right">Save</button>
                <td></td>
            </tr>
            <tr>
                <td>
                    Prabhu
                </td>
                <td>
                    +91XXXXXXXXXX
                </td>
                <td>
                    India
                </td>
                <td>
                    Male
                </td>
                <td>


                    <select autocomplete="OFF" class="form-control" id="drpDwn" name="usr.Status" onchange="MyFunction()"><option value="Active">Active</option>
<option value="InActive">In Active</option>
</select>
                <td id="btn" style="display:none">
                    <button type="submit" style="float:right" onclick="Save('H8FBLiC8GO')" ng-hide="false" class="btn btn-primary active pull-right">Save</button>
                <td></td>
            </tr>

            <!-- removed more rows from here -->

        </table>
    </div>
</form>

Answer 1

$( document ).ready(function() {
    $('.selectOption').change(function(){
        if ($(this).val() == "Active") {
            $(this).parents('.parent').children('.subButton').hide();
        }
        else {
            $(this).parents('.parent').children('.subButton').show();
        }
    });
});

@foreach (var usr in (List<RegistrationResponsive.Models.RegistrationModels>)ViewData["UsersList"])
{
    <tr class="parent">
        @{
            List<SelectListItem> listItems = new List<SelectListItem>();
            listItems.Add(new SelectListItem
            {
                Text = "Active",
                Value = "Active"
            });
            listItems.Add(new SelectListItem
            {
                Text = "In Active",
                Value = "InActive"
            });
        }
        <td>
        @Html.DropDownListFor(a => @usr.Status, listItems, new { @class = "form-control selectOption", @autocomplete = "OFF", @id = "drpDwn"" })
        </td>
        <td id="btn" class="subButton" style="display:none">
            <button type="submit" style="float:right" onclick="Save('@usr.ID')" ng-hide="false" class="btn btn-primary active pull-right">Save</button>
        </td>
    </tr>
}

Button Hide＆amp;仅在第一行显示？

1 个答案: