Как отключить выбранную опцию из динамически загружаемых опций

Question

У меня есть кнопка, которая при каждом нажатии добавляет еще один раскрывающийся список, и я динамически создаю его параметры из своей базы данных через ajax.

Ниже мой код :

HTML для кнопки и выберите:

<button type="button" class="btn btn-outline-success w-100 fake_add" style="margin-top: 0;">Add row</button>

<select class="form-control inv_list inv_item_list1"></select>

jQuery для загрузки элементов опций и динамического добавления другого выпадающего списка:

let option = ''

function load_items() {
    $.ajax({
        url : `${base_url}customized/Upload_sales_data/get_items`,
        type : 'POST',
        dataType : 'JSON',
        success : function(items) {
            option = '<option value="" selected hidden>Select Item</option>'

            items.map(function(item){
                option += `<option value="${item.id}">${item.itemname}</option>`
            })

            $('.inv_item_list1').html(option)
        }
    })
}

load_items() /*Function call*/

/* Add new field */
$(document).on('click', '.fake_add', function(){
    count = $('.field_wrapper #inv_item_list').length
    count++

    let newfield = `
    <div class="discount_row row">
        <div class="col-md-3 pl-0 mb-1">
            <select class="form-control inv_list inv_item_list${count}" id="inv_item_list">
            </select>
        </div>

        <div class="col-md-3 mb-1 text-left text-red">
            <i class="fa fa-trash fake_delete" style="font-size: 30px;"></i>
        </div>
    </div>
    `
    $('.field_wrapper').append(newfield)
    $(`.inv_item_list${count}`).html(option)
})

Мой вопрос, как я могуотключить те параметры, которые были выбраны из предыдущих выпадающих?

Answer 1

После изменения выбранного параметра передайте значение или текст в массив.

Затем, после создания нового элемента выбора, проверьте, находится ли значение или текст нового элемента выбора в массиве, используя этот код:

$(`.new_select`).find("option").filter(function () {
    for (i = 0; i < selected_array.length; i++) {
        if ($(this).html() == selected_array[i])
            $(this).attr("disabled", true);
    }
})

Answer 2

Создайте один массив, чтобы вы могли отслеживать предыдущие выбранные значения dropdwon.

при добавлении нового dropdwon сначала добавьте последнее значение раскрывающегося списка в массив.

$(document).on('click', '.fake_add', function(){

 myselectedOptions.push($('#dropdownId').children("option:selected").val());

})

let option = '';
var myselectedOptions = [];

function load_items() {
    $.ajax({
        url : `${base_url}customized/Upload_sales_data/get_items`,
        type : 'POST',
        dataType : 'JSON',
        success : function(items) {
            option = '<option value="" selected hidden>Select Item</option>'

            items.map(function(item){
             if(myselectedOptions.indexOf(item.id) > 0)
             {
                option += '<option disabled value="${item.id}">${item.itemname}</option>'
             }
            else
            {
              option += '<option value="${item.id}">${item.itemname}</option>'
            }
         })
            $('.inv_item_list1').html(option)
        }
    })
}