skip to Main Content
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

3

Answers


  1. $("#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.

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
  3. 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/

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search