Как заблокировать выбор select через js в другом селекте

Question

Как заблокировать выбор select через js в другом селекте

Рейтинг: 1Ответов: 1Опубликовано: 04.11.2014

<select class="form-control ship-input-dark input-sm" name="color">
     <option value="1">Из белой</option>
     <option value="2">Из серой</option>
     <option value="3">Из зеленной</option>
     <option value="4">Из желтой</option>
     <option value="5">Из оранжевой</option>
     <option value="6">Из красной</option>
</select>
<select class="form-control ship-input-dark input-sm" name="colors">
     <option value="2">В серую</option>
     <option value="3">В зеленную</option>
     <option value="4">В желтую</option>
     <option value="5">В оранжевую</option>
     <option value="6">В красную</option>
     <option value="7">В фиолетовую</option>
</select>

Имеется 2 селекта. Принцип такой: если выбрали 1 пункт в 1 селекте, во втором ничего не блокировалось, а при выборе 2 пункта в первом селекте блокировался во втором силекте 1 пункт, т.е. чтоб нельзя было переконвертировать энергию "из серой в серую" и так далее.
Буду очень благодарен.

Обновление

$(document).ready(function() {
    $('[name="color"]').on("change", function() {
        var $target = $('[name="colors"]');
        var thisValue = $(this).val();
        $target.val('0');
        $target.find('option').prop('disabled', false).show();
        for (var i = 1; i < thisValue; i++) {
            $target.find('[value="' + (i + 1) + '"]').prop('disabled', true);
        }
    });
});

Посмотри, что-то получилось, нормальный или быдло код как говорят? )

( http://jsfiddle.net/nwpju4ek/3/ )

<form action="" method="post">

Как это вставлять через js в эту же функцию? А то что-то ломается сразу. Что между ' '?

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 3

Как-то так?

$('[name="color"]').change(function(){
   var $target = $('[name="colors"]');
   var thisValue = $(this).val();
   $target.val('0');
   $target.find('option').prop('disabled', false).show();
   $target.find('[value="' + thisValue + '"]').prop('disabled',true).hide();
});

( http://jsfiddle.net/nwpju4ek/1/ )

В фиддле же работает, если у вас бутстрап, вероятнее всего нужно "переиничивать кастомный селект" после каждой манипуляции с "options". И да что говорит консоль, попробуйте ввести туда: $('[name="colors"]').html();

Как заблокировать выбор select через js в другом селекте

Ответы