根据 3 个多 select 选项隐藏 table 行 <tr>

Question

有没有办法根据 selected 选项为下面的行隐藏 tr？当我在页面上有一个 select 选项并按预期工作时，我设法做到了，但是当再添加 2 个时，onchange 事件不再触发。我也尝试为每个创建一个函数，但仍然没有用。有人可以在这里为我指明正确的方向吗？

<form asp-action="Functionality" asp-controller="Promo" method="post">
    <div class="text-left">
        <h4>Table</h4>
    </div>
    <br />
    <div class="row">
        <table class="table table-bordered table-striped" style="width:100%" id="tbl">
            <thead>
                <tr>
                    <th scope="col" style="width:20%">Fields</th>
                    <th scope="col" style="width:25%">Data</th>
                    <th scope="col" style="width:55%">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <label asp-for="TierDefinition"></label>
                    </td>
                    <td>
                        <input asp-for="TierDefinition" type="text" class="form-control" value="TierDefinition" />
                        <span asp-validation-for="TierDefinition" class="text-danger"></span>
                    </td>
                    <td>
                        <lable></lable>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label asp-for="TD_Number"></label>
                    </td>
                    <td>
                        <input asp-for="TD_Number" type="number" class="form-control" />
                        <span asp-validation-for="TD_Number" class="text-danger"></span>
                    </td>
                   <td>
                        <lable>
                           
                        </lable>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label asp-for="TD_ThresholdType"></label>
                    </td>
                    <td>
                        <select class="custom-select mr-sm-2" asp-for="TD_ThresholdType" onchange="getval();">
                            <option value="" selected disabled>Please select a threshold type</option>
                            <option>QTY_</option>
                            <option>AMT_</option>
                        </select>
                        <span asp-validation-for="TD_ThresholdType" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                           
                        </lable>
                    </td>
                </tr>
                <tr class="TD_ThresholdQty">
                    <td>
                        <label asp-for="TD_ThresholdQty"></label>
                    </td>
                    <td>
                        <input asp-for="TD_ThresholdQty" type="number" class="form-control" id="ThresholdQty"/>
                        <span asp-validation-for="TD_ThresholdQty" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                           
                        </lable>
                    </td>
                </tr>
                <tr class="TD_ThresholdAmt">
                    <td>
                        <label asp-for="TD_ThresholdAmt"></label>
                    </td>
                    <td>
                        <input asp-for="TD_ThresholdAmt" type="number" class="form-control" id="ThresholdAmt"/>
                        <span asp-validation-for="TD_ThresholdAmt" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                           
                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscType">
                    <td>
                        <label asp-for="TD_DiscType"></label>
                    </td>
                    <td>
                        <select class="custom-select mr-sm-2" asp-for="TD_DiscType" onchange="getval();">
                            <option value="" selected disabled>Please select a discount type</option>
                            <option>PCT_</option>
                            <option>AMT_</option>
                            <option>PRCH</option>
                        </select>
                        <span asp-validation-for="TD_DiscType" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                           
                        </lable>
                    </td>
               </tr>
                <tr class="TD_DiscPct">
                    <td>
                        <label asp-for="TD_DiscPct"></label>
                    </td>
                    <td>
                        <input asp-for="TD_DiscPct" type="number" class="form-control" id="DiscPct"/>
                        <span asp-validation-for="TD_DiscPct" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                           
                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscAmt">
                    <td>
                        <label asp-for="TD_DiscAmt"></label>
                    </td>
                    <td>
                        <input asp-for="TD_DiscAmt" type="number" class="form-control" id="DiscAmt"/>
                        <span asp-validation-for="TD_DiscAmt" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                           
                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscAppliesTo">
                    <td>
                        <label asp-for="TD_DiscAppliesTo"></label>
                    </td>
                    <td>
                        <select class="custom-select mr-sm-2" asp-for="TD_DiscAppliesTo" onchange="getval();">
                            <option value="" selected disabled>Please select a discount type</option>
                            <option>EACH</option>
                            <option>ALL_</option>
                            <option>ELST</option>
                            <option>ALST</option>
                            <option>EMST</option>
                            <option>AMST</option>
                            <option>ITEM</option>
                        </select>
                        <span asp-validation-for="TD_DiscAppliesTo" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                           
                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscQty">
                    <td>
                        <label asp-for="TD_DiscQty"></label>
                    </td>
                    <td>
                        <input asp-for="TD_DiscQty" type="number" class="form-control" id="DiscQty"/>
                        <span asp-validation-for="TD_DiscQty" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                            
                        </lable>
                    </td>
                </tr>
                <tr class="TD_AddlInfo">
                    <td>
                        <label asp-for="TD_AddlInfo"></label>
                    </td>
                    <td>
                        <input asp-for="TD_AddlInfo" type="text" class="form-control" id="AddlInfo"/>
                        <span asp-validation-for="TD_AddlInfo" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>
                           
                        </lable>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <br />
</form>
<script>
    function getval() {
        $(document).ready(function () {
            var selectedValue = $(this).find(":selected").text();
            switch (selectedValue) {
                //1st select option
                case "QTY_":
                    alert($(this).find("option:selected").text());
                    //Clear input value
                    $('#ThresholdAmt').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_ThresholdQty").show();
                    $("#tbl tr.TD_ThresholdAmt").hide();
                    break;
                case "AMT_":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#ThresholdQty').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_ThresholdQty").hide();
                    $("#tbl tr.TD_ThresholdAmt").show();
                    break;
                //2nd select option
                case "PCT_":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#DiscAmt').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscPct").show();
                    $("#tbl tr.TD_DiscAmt").hide();
                    break;
                case "AMT_":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#DiscPct').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscPct").hide();
                    $("#tbl tr.TD_DiscAmt").show();
                    break;
                case "PRCH":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#DiscPct').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscPct").hide();
                    $("#tbl tr.TD_DiscAmt").show();
                    break;
                //3rd select option
                case "EACH":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#DiscQty').val('');
                    $('#AddlInfo').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").hide();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "ALL_":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#DiscQty').val('');
                    $('#AddlInfo').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").hide();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "ELST":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#AddlInfo').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").show();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "ALST":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#AddlInfo').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").show();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "EMST":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#AddlInfo').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").show();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "AMST":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#AddlInfo').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").show();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "ITEM":
                    alert($(this).find("option:selected").text());
                    //clear input value
                    $('#DiscQty').val('');
                    $('#AddlInfo').val('');
 
                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").hide();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
            }
        });
    };
</script>
@section Scripts
{
    <partial name="_ValidationScriptsPartial" />
}

Answer 1

您可以尝试将 this 传递给 getVal() 并删除 $(document).ready(function (){}。这是一个演示：

查看：

<form asp-action="Functionality" asp-controller="Promo" method="post">
    <div class="text-left">
        <h4>Table</h4>
    </div>
    <br />
    <div class="row">
        <table class="table table-bordered table-striped" style="width:100%" id="tbl">
            <thead>
                <tr>
                    <th scope="col" style="width:20%">Fields</th>
                    <th scope="col" style="width:25%">Data</th>
                    <th scope="col" style="width:55%">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <label asp-for="TierDefinition"></label>
                    </td>
                    <td>
                        <input asp-for="TierDefinition" type="text" class="form-control" value="TierDefinition" />
                        <span asp-validation-for="TierDefinition" class="text-danger"></span>
                    </td>
                    <td>
                        <lable></lable>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label asp-for="TD_Number"></label>
                    </td>
                    <td>
                        <input asp-for="TD_Number" type="number" class="form-control" />
                        <span asp-validation-for="TD_Number" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label asp-for="TD_ThresholdType"></label>
                    </td>
                    <td>
                        <select class="custom-select mr-sm-2" asp-for="TD_ThresholdType" onchange="getval(this);">
                            <option value="" selected disabled>Please select a threshold type</option>
                            <option>QTY_</option>
                            <option>AMT_</option>
                        </select>
                        <span asp-validation-for="TD_ThresholdType" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr class="TD_ThresholdQty">
                    <td>
                        <label asp-for="TD_ThresholdQty"></label>
                    </td>
                    <td>
                        <input asp-for="TD_ThresholdQty" type="number" class="form-control" id="ThresholdQty" />
                        <span asp-validation-for="TD_ThresholdQty" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr class="TD_ThresholdAmt">
                    <td>
                        <label asp-for="TD_ThresholdAmt"></label>
                    </td>
                    <td>
                        <input asp-for="TD_ThresholdAmt" type="number" class="form-control" id="ThresholdAmt" />
                        <span asp-validation-for="TD_ThresholdAmt" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscType">
                    <td>
                        <label asp-for="TD_DiscType"></label>
                    </td>
                    <td>
                        <select class="custom-select mr-sm-2" asp-for="TD_DiscType" onchange="getval(this);">
                            <option value="" selected disabled>Please select a discount type</option>
                            <option>PCT_</option>
                            <option>AMT_</option>
                            <option>PRCH</option>
                        </select>
                        <span asp-validation-for="TD_DiscType" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscPct">
                    <td>
                        <label asp-for="TD_DiscPct"></label>
                    </td>
                    <td>
                        <input asp-for="TD_DiscPct" type="number" class="form-control" id="DiscPct" />
                        <span asp-validation-for="TD_DiscPct" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscAmt">
                    <td>
                        <label asp-for="TD_DiscAmt"></label>
                    </td>
                    <td>
                        <input asp-for="TD_DiscAmt" type="number" class="form-control" id="DiscAmt" />
                        <span asp-validation-for="TD_DiscAmt" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscAppliesTo">
                    <td>
                        <label asp-for="TD_DiscAppliesTo"></label>
                    </td>
                    <td>
                        <select class="custom-select mr-sm-2" asp-for="TD_DiscAppliesTo" onchange="getval(this);">
                            <option value="" selected disabled>Please select a discount type</option>
                            <option>EACH</option>
                            <option>ALL_</option>
                            <option>ELST</option>
                            <option>ALST</option>
                            <option>EMST</option>
                            <option>AMST</option>
                            <option>ITEM</option>
                        </select>
                        <span asp-validation-for="TD_DiscAppliesTo" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr class="TD_DiscQty">
                    <td>
                        <label asp-for="TD_DiscQty"></label>
                    </td>
                    <td>
                        <input asp-for="TD_DiscQty" type="number" class="form-control" id="DiscQty" />
                        <span asp-validation-for="TD_DiscQty" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
                <tr class="TD_AddlInfo">
                    <td>
                        <label asp-for="TD_AddlInfo"></label>
                    </td>
                    <td>
                        <input asp-for="TD_AddlInfo" type="text" class="form-control" id="AddlInfo" />
                        <span asp-validation-for="TD_AddlInfo" class="text-danger"></span>
                    </td>
                    <td>
                        <lable>

                        </lable>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <br />
</form>

js:

<script>
        function getval(e) {
            var selectedValue = $(e).find(":selected").text();
            switch (selectedValue) {
                //1st select option
                case "QTY_":
                    alert($(e).find("option:selected").text());
                    //Clear input value
                    $('#ThresholdAmt').val('');

                    //show/hide fields
                    $("#tbl tr.TD_ThresholdQty").show();
                    $("#tbl tr.TD_ThresholdAmt").hide();
                    break;
                case "AMT_":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#ThresholdQty').val('');

                    //show/hide fields
                    $("#tbl tr.TD_ThresholdQty").hide();
                    $("#tbl tr.TD_ThresholdAmt").show();
                    break;
                //2nd select option
                case "PCT_":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#DiscAmt').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscPct").show();
                    $("#tbl tr.TD_DiscAmt").hide();
                    break;
                case "AMT_":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#DiscPct').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscPct").hide();
                    $("#tbl tr.TD_DiscAmt").show();
                    break;
                case "PRCH":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#DiscPct').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscPct").hide();
                    $("#tbl tr.TD_DiscAmt").show();
                    break;
                //3rd select option
                case "EACH":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#DiscQty').val('');
                    $('#AddlInfo').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").hide();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "ALL_":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#DiscQty').val('');
                    $('#AddlInfo').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").hide();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "ELST":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#AddlInfo').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").show();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "ALST":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#AddlInfo').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").show();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "EMST":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#AddlInfo').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").show();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "AMST":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#AddlInfo').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").show();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
                case "ITEM":
                    alert($(e).find("option:selected").text());
                    //clear input value
                    $('#DiscQty').val('');
                    $('#AddlInfo').val('');

                    //show/hide fields
                    $("#tbl tr.TD_DiscQty").hide();
                    $("#tbl tr.TD_AddlInfo").hide();
                    break;
            }
        }
    </script>

结果：

根据 3 个多 select 选项隐藏 table 行 <tr>

Hide table row <tr> based on 3 multi select options

javascript

asp.net-core-mvc