jQuery indexOf манипуляции с полем выбора

Question

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

Когда нажата кнопка «Добавить еще», я исчезаю в контейнере следующего поля выбора. Ряд блоков выбора был сгенерирован PHP, и я использую JS, чтобы скрыть их. Каждое поле выбора имеет уникальный номер, добавленный к идентификатору, поэтому я хочу получить доступ к тем полям выбора, которые содержат строку «other_pet_types», затем я хочу перебрать все видимые в данный момент и построить массив значений, которые были выбраны, который я затем удалю из списка опций в появившемся окне выбора.

Это то, что я имею до сих пор, но это определенно не правильно - я не могу заставить начальный тест по идентификатору работать.

Любые указатели очень ценятся, так как я понимаю, что на данный момент я достаточно широк!

 var vals = new Array();
//build array with currently selected options
    $('p.mult_entries select').each(function(){
            vals += $(this).val();
    });
    $("p.mult_entries:hidden:first").fadeIn("slow", function() {
            $(this).find(('select').attr('id').indexOf('other_pet_types') > 0).each(function(){
            console.log($(this).val()); //as expected prints nothing - need to iterate through the options of the above select
                //once i extract the correct values, iterate through new select box and use inArray to remove options where that value already exists in one of previous select boxes
        });
    });

Answer 1

Я сделал быстрый jsFiddle на основе вашего описания , который работает. Вместо того, чтобы создавать отдельный массив, он просто проходит через опции выбора. Скорее всего, вы захотите добавить логику для изменения выбора и повторного включения вашего предыдущего выбора. Вы можете использовать функцию jQuery .data () , чтобы сохранить значение, чтобы вы могли получить его после изменения .... или сохранить в cookie. Это должно помочь вам начать.

Answer 2

То, как вы строите свой массив, неверно. Вы строите это как строку, а не массив. Это должно работать:

$('p.mult_entries select').each(function(){
  vals[vals.length] = $(this).val();
});

То, как вы находите соответствующие поля выбора, можно превратить просто в селектор, а не в несколько функций:

$(this).children("select[id^=other_pet_types]").each(function(){
  //do stuff here
});