Отключение одной опции в списке HTML

Question

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

Answer 1

Если у вас есть следующий HTML:

<select id="select1">
    <option value="">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

<select id="select2">
    <option value="">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

<select id="select3">
    <option value="">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

Вы можете сделать это (с помощью jquery):

var previousValues = []
    $selects = $('#select1, #select2, #select3');

$selects
    .mousedown(function(e) {
        // save the previous value for re-enabling it when you change
        var val = $(this).val();
        if (val) {
            previousValues[this.id] = val;
        }
    })
    .change(function(e) {
        // get the other select elements
        var $theOtherSelects = $selects.not('#' + this.id),
            prevVal = previousValues[this.id],
            val = $(this).val();

        // re-enable the previously disabled option
        if (prevVal) {
            $theOtherSelects
                .find('option[value=' + prevVal + ']')
                .prop('disabled', false);
        }

        // if a value is selected, disble in the other selects            
        if (val) {
            $theOtherSelects
                .find('option[value=' + val + ']')
                .prop('disabled', true);
        }
    })
    .mousedown()
    .change();

Вот вам jsfiddle играть с.

Примечание : я использовал jQuery, потому что он намного проще, будет работать в кросс-браузерном режиме, и вы не указали, что не хотите использовать его явно.

Answer 2

Вы можете установить какое-то уникальное свойство для каждой опции (значение может быть достаточно, в противном случае класс - хороший выбор) и использовать jQuery для выбора и удаления одной опции из двух других, когда она выбрана в одном из селекторов.

РЕДАКТИРОВАТЬ: Вот пример, который делает то, что вы хотите.Тебе придется немного его изменить.Ответ Дидье может быть ближе к тому, что вы хотите.

http://jsfiddle.net/baByZ/39/