如何从下拉列表中删除不需要的选项值？答案

【问题标题】：How to remove unwanted option value from dropdown?如何从下拉列表中删除不需要的选项值？
【发布时间】：2020-10-09 14:26:40
【问题描述】：

example 1

<select id="BillTypeId" name="BillTypeId" required="" class="form-control">
<option value=""></option>
<option value="9" tax-groupid="1" data-price="1500.00" data-isfixed="False">LAUNDRY</option>
<option value="1064" tax-groupid="1" data-price="0.00" data-isfixed="False">DEBIT</option>
<option value="1065" tax-groupid="1" data-price="0.00" data-isfixed="False">CREDIT</option>
</select>

假设我有一个包含动态 option 值的下拉列表。

我有一个function 可以从控制器中检索这些值。

$.ajax({
            url: '/cash/bill/PostingBillTypeCombo',
            dataType: 'html',
            data: {
                name: "BillTypeId",
                required: true,
                currencyId: selectedCurrencyId
            },
            method: 'POST',
            success: function (data) {
                debugger;
                if (data.op == "DEBIT" || data.op== "CREDIT")
                {
                $('#PostingBillTypeComboContainer').html("");
                $('#PostingBillTypeComboContainer').html(data);
                }

            },
        });

在我的下拉列表中，它有 3 个值 - credit 、 debit 和洗衣店。

在function (data) 中，我使用data.op 检查其借方或贷方if (data.op == "DEBIT" || data.op== "CREDIT") （检查示例 1） 如果它包含这些名称，则删除其余选项值，例如：LAUNDRY，并且仅在下拉列表中显示借方和贷方值。

我是新手，请帮我原谅我的英语不好

【问题讨论】：

您的data 是否包含每个op 的ID？或者只是将名称作为字符串？
请包含来自您的控制器的响应
如果你在 if 循环中执行 console.log(data)，它会记录什么？
if (data.op... 将不与$(..).html(data)兼容
@IslamElshobokshy 它只获取例如 DEBIT、CREDIT 和 LAUNDRY 的值，然后为它们创建一个动态选项值

标签： javascript html jquery css ajax

【解决方案1】：

你可以这样做：

if (data.op == "DEBIT") {
  $("#BillTypeId option:not(:contains('DEBIT'))").hide();
} else if (data.op == "CREDIT") {
  $("#BillTypeId option:not(:contains('CREDIT'))").hide();
}

$("#BillTypeId option:not(:contains('DEBIT'))").hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<select id="BillTypeId">
  <option value=""></option>
  <option value="9">LAUNDRY</option>
  <option value="1064">DEBIT</option>
  <option value="1065">CREDIT</option>
</select>

【讨论】：

【解决方案2】：

让我们用 CSS 来做吧：

.debit-credit option:not(.debit-credit) {
    display: none;
}

让我们在结构上应用这个：

<select id="BillTypeId" name="BillTypeId" required="" class="form-control">
<option class="debit-credit" value=""></option>
<option value="9" tax-groupid="1" data-price="1500.00" data-isfixed="False">LAUNDRY</option>
<option class="debit-credit" value="1064" tax-groupid="1" data-price="0.00" data-isfixed="False">DEBIT</option>
<option class="debit-credit" value="1065" tax-groupid="1" data-price="0.00" data-isfixed="False">CREDIT</option>
</select>

然后，如果要隐藏 LAUNDRY，则将 debit-credit 类添加到 BillTypeId，如果要显示，则删除该类：

$.ajax({
            url: '/cash/bill/PostingBillTypeCombo',
            dataType: 'html',
            data: {
                name: "BillTypeId",
                required: true,
                currencyId: selectedCurrencyId
            },
            method: 'POST',
            success: function (data) {
                debugger;
                if (data.op == "DEBIT" || data.op== "CREDIT")
                {
                $('#PostingBillTypeComboContainer').html("");
                $('#PostingBillTypeComboContainer').html(data);
                $('#BillTypeId').addClass("debit-credit");
                } else {
                $('#BillTypeId').removeClass("debit-credit");
                }

            },
        });

这是一个概念证明：https://jsfiddle.net/hz6vqnbj/

【讨论】：

【解决方案3】：

$("#BillTypeId option[value=1064]").hide();

如果您知道要隐藏哪个选项，则使用此代码通过传递其值来隐藏相应的选项。

【讨论】：