Удаление и добавление опций из группы меню выбора с помощью jQuery

Question

Это немного сложнее, чем следует из названия, но вот основные бизнес-правила:

1. На страница, каждая заполнена тем же параметры и значения.
2. Всегда будет три выбранных меню.
3. Всегда будет один и тот же номер вариантов / значений в каждом выборе меню.
4. Выбор вопроса в любом из меню удалит этот вопрос как вариант из два других меню.
5. Повторный выбор другого вопроса из любого меню принесет назад вопрос, который был ранее удалены из других два меню по индексу, в котором оно было ранее.

Я пробовал это несколькими разными способами, и вещь, которая убивает меня, это номер 5. Я знаю, что он не будет вставлен с точным указателем, потому что некоторые вопросы, возможно, уже были удалены, что изменило бы порядок индекс. По сути, для этого требуется insertBefore или insertAfter, который помещает его в тот же «слот».

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

JQuery:

$(function() {
    $(".questions").change(function() {
        var t = this;
        var s = $(t).find(":selected");

        // Remove, but no "insert previously selected" yet...

        $(".questions").each(function(i) {
            if (t != this) {
                $(this).find("option[value=" + s.val() + "]").remove();
            }
        });
    });
});

HTML:

<select name="select1" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>
<select name="select2" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>
<select name="select3" class="questions">
    <option value="1">Please select an option...</option>
    <option value="2">What is your favorite color?</option>
    <option value="3">What is your pet's name?</option>
    <option value="4">How old are you?</option>
</select>

Answer 1

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

$(function() {
    $('select.questions').change(function() {            
        var hidden = [];
        // Get the values that should be hidden
        $('select.questions').each(function() {
            var val = $(this).find('option:selected').val();
            if(val > 0) {
                hidden.push($(this).find('option:selected').val());
            }
        });
        // Show all options...          
        $('select.questions option').show().removeAttr('disabled');            
        // ...and hide those that should be invisible
        for(var i in hidden) {
            // Note the not(':selected'); we don't want to hide the option from where
            // it's active. The hidden option should also be disabled to prevent it
            // from submitting accidentally (just in case).
            $('select.questions option[value='+hidden[i]+']')
                .not(':selected')
                .hide()
                .attr('disabled', 'disabled');
        }
    });
});

Я также внес небольшое изменение в ваш HTML, я обозначил параметр, который всегда должен быть видимым со значением 0. Таким образом, допустимые параметры изменяются с 1 на 3.

Вот рабочий пример, скажите, если я вас неправильно понял:

http://www.ulmanen.fi/stuff/selecthide.php

Answer 2

Недавно я работал над решением этой проблемы и изменил этот код, чтобы удалить, а не отключить / скрыть.Для моего решения это было необходимо (я также использую пользовательский интерфейс для стилизации элементов выбора).Вот как я это сделал:

// Copy an existing select element
var cloned = $('select[name="select1"]').clone();

// Each time someone changes a select
$('select.questions').live('change',function() {
    // Get the current values, then reset the selects to their original state
    var hidden[];
    $('select.questions').each(function() {
        hidden.push($(this).val());
        $(this).html(cloned.html());
    });
    // Look through the selects
    for (var i in hidden) {
        $('select.questions').each(function() {
            // If this is not the current select
            if ((parseInt(i)) != $(this).parent().index()) {
                // Remove the ones that were selected elsewhere
                $(this).find('option[value="'+hidden[i]+'"]').not('option[value="0"]').remove();
            } else {
                // Otherwise, just select the right one
                $(this).find('option[value="'+hidden[i]+'"]').not('option[value="0"]').attr('selected','selected');
            }
        });
    }
});