CODEWITHSUNDEEP
javascripthtmljquerycssajax
Wfee
Wfee

Reputation: 71

How to remove unwanted option value from dropdown?

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>

Let's suppose I have a dropdown with dynamic option values.

I have a function to retrieve these value from controller.

$.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);
                }

            },
        });

In my dropdown it has 3 values -credit , debit and laundry.

Within the function (data) I use the data.op to check whether its debit or credit if (data.op == "DEBIT" || data.op== "CREDIT") (check example 1) if it contain those names remove the rest of the option values eg:LAUNDRY and only show the debit and credit values in the dropdown.

I'm new to this please help me sorry for my poor English

Upvotes: 2

Views: 150

Answers (3)

Lajos Arpad
Lajos Arpad

Reputation: 76434

Let's do it with CSS:

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

Let's apply this on the structure:

<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>

Then you add debit-credit class to BillTypeId if you want to hide LAUNDRY and remove that class if you want to show it:

$.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");
                }

            },
        });

Here's a proof of concept: https://jsfiddle.net/hz6vqnbj/

Upvotes: 1

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

You can do something like this :

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>

Upvotes: 2

Girish Sasidharan
Girish Sasidharan

Reputation: 588

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

if you know which one to hide then use this code to hide the corresponding option by passing its value.

Upvotes: 0

Related Questions