Javascript 在使用动态表时，如何使用基于下拉列表的jquery显示/隐藏列？

我有一个动态表来计算价格，我想要一个下拉列表来在小时和费率、价格和数量之间切换

我的代码工作正常问题是，当我向表中添加一行时，所有列都会在应该隐藏的列被隐藏之前显示一秒钟。我希望在添加新行时只显示用户选择的内容

Javascript

$（窗口）.ready（函数（）{
类型（）；
});
函数类型（）{
变量类型=$（“#类型选择选项：选定”）.val（）；
如果（类型==“小时”）{
$（'.quantitySelect'）.hide（）；
$（'.hourselect'）.show（）；
}否则{
$（'.quantitySelect'）.show（）；
$（'.hourselect'）.hide（）；
}
}

HTML

小时
量
项目名称
小时
比率
价格
量
优惠
税
数量
......

您需要在选择上添加更改事件处理程序，并使用，以便切换您感兴趣的列的可见性：

$（'#typeSelect'）。关于（'change'，函数（e）{
var val=$（“#类型选择选项：选定”）.val（）；
如果（val==‘数量’）{
$（'table.table-bordered tr:n个孩子（4），table.table-bordered tr:n个孩子（5）'）.show（）；
$（'table.table-bordered tr:n子级（2），table.table-bordered tr:n子级（3）'）.hide（）；
}否则{
$（'table.table-bordered tr:nth child（4），table.table-bordered tr:nth child（5）'）.hide（）；
$（'table.table-bordered tr:n个孩子（2），table.table-bordered tr:n个孩子（3）'）。show（）；
}
}).触发（“变更”）

小时
量
项目名称
小时
比率
价格
量
优惠
税
数量
1.
1s
1s
1q
1q
1.
1.
1.
谢谢，它工作得非常好。我必须了解您建议的选择器，今天我学到了一些新东西。谢谢
<script>
    $(window).ready(function () {
        type();
    });
    function type() {
        var type = $("#typeSelect option:selected").val();
        if (type === "Hours") {
            $('.quantitySelect').hide();
            $('.hoursSelect').show();
        } else {
            $('.quantitySelect').show();
            $('.hoursSelect').hide();
        }
    }
</script>

<select class="form-control ml-4" style="width:auto;float:left" id="typeSelect" asp-for="OrderItemType">
  <option value="Hours">Hours</option>
  <option value="Quantity">Quantity</option>
</select>


<table class="table-bordered add_new_field">
<thead>
    <tr>
        <th>Item Name</th>
        <th class="hoursSelect">Hours</th>
        <th class="hoursSelect">Rate</th>
        <th class="quantitySelect">Price</th>
        <th class="quantitySelect">Quantity</th>
        <th class="discountSelect colm" data-col="column1">Discount</th>
        <th class="taxSelectt">Tax</th>
        <th style="text-align:right; padding-right: 10px">Amount</th>
    </tr>
</thead>
......