Проблема с конфликтующими функциями JavaScript?

Оффтоп javascript
1

У меня есть функция на JavaScript, которая убирает выбранные элементы из выпадающего списка. Проблема в том, что у меня есть два выпадающих списка, которые могут содержать одинаковые данные. Когда я выбираю значение в первом списке, оно исчезает и из второго.

Вот код:

function connect() {
    $("option").show();
    $(".selectbox").each(function(i) { 
        var obj = $("option[value='" + $(this).val() + "']");
        if($(this).val() != "") obj.hide();     
    }); 
}

function to() {
    $("option").show();
    $(".selectboxes").each(function(j) { 
        var objs = $("option[value='" + $(this).val() + "']");      
        if($(this).val() != "") objs.hide();        
    }); 
}

HTML часть:

<select id="sc" name="connect_array[]" class="input-select selectbox" onchange="connect()">
    <option value="">--Выберите--</option>
    <option value="friends_name">Имя друга</option>
    <option value="email">Электронная почта</option>
</select>

<select name="to_array[]" class="input-select selectboxes" onchange="to()">
    <option value="">--Выберите--</option>
    <option value="friends_name">Имя друга</option>
    <option value="phone">Телефон</option>
</select>

Я пробовал использовать разные классы для обоих списков, но это не решает проблему. Порядок элементов в списках создается динамически, и иногда они могут содержать одинаковые данные, что невозможно избежать. Есть ли способ обойти эту проблему?

2

Недавно решал такую же задачу. Добавь data-атрибут к каждому селекту: data-group=“group1” и data-group=“group2”. Тогда в функциях ищи опции только внутри селектов с нужным атрибутом. Или еще проще - дай каждому списку свой ID и через них ограничивай поиск. У меня сработало.

3

Твой код ищет опции по всей странице через $("option[value='...']") - вот где проблема. Ограничь поиск конкретным селектом: $(this).closest('form').find("option[value='...']") или укажи ID нужного селекта. Тогда один список не будет влиять на другой.

4

Проблема в том, что $("option[value='...']") хватает все опции на странице. Надо исключить опции из текущего селекта. Попробуй: $("option[value='" + $(this).val() + "']").not($(this).find('option')) - скроет нужные опции везде кроме текущего списка. Или добавь родительский контейнер и ограничь поиск им.