Ограничения диапазона выпадающих списков

Question

У меня есть два выпадающих списков в HTML ищут (упрощенный), как это:

<select name="from" id="abs-from-1"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    <option value="5">Five</option> 
</select> 

<select name="to" id="abs-to-1"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    <option value="5">Five</option> 
</select> 

Я хотел бы ограничить эти входы, так что, когда пользователь выбирает «Три» в в первом раскрывающемся списке значения «Один» и «Два» полностью удаляются (или отключаются) во втором раскрывающемся списке и наоборот: когда пользователь выбирает «Четыре» во втором раскрывающемся списке, я бы как будто «Пять» удалены из первого выпадающего списка. (Kinda like range-slider)

Я знаю, что это должно быть возможно с помощью небольшого кода jQuery, но может ли кто-нибудь объяснить, как это сделать?

Edit:

Добавлено немного JQuery код, который я играл с, я могу выбрать текущее значение и получить следующий выпадающий элемент. Но как я могу отключить значения «To», которые меньше текущего значения в элементе «From», и наоборот.

$('[name="from"]').on("change", function() { 
    var currentVal = $(this).attr('value'); 
    var toElem = $(this).next('[name="to"]'); 
}); 

Answer 1

Я изменил код, предложенный Рамана Chodźka немного, так что он не опирается на идентификаторах больше, и я могу использовать несколько этих выпадающие списки на одной странице.

This is what I've done (jsFiddle):

$('[name="from"],[name="to"]').change(function() { 
    var e = $(this); 
    var val = parseInt($(this).val()); 
    e.siblings('[name="from"],[name="to"]').find('option').prop('disabled', false).filter(function() { 
    return ((e.attr('name') == 'from') ? parseInt(this.value) < val : parseInt(this.value) > val); 
    }).prop('disabled', true); 
}); 

Answer 2

Вы должны добавить OnChange (на современных браузерах работает с OnClick на опции также, но я до сих пор предложить OnChange) событие на вашем выбирает, что вызывает функцию JS, которая делает что-то вроде того, что здесь ответа ребят: jQuery remove options from select

Я предлагаю добавить некоторые идентификаторы для выбора, чтобы добавить событие слушателя вы можете сделать что-то вроде $('#idSelect1').change(function() {bla bla})

Или вы можете добавить событие непосредственно в YOUT HTML.

Answer 3

Угадайте вы ищете динамический список выбора: http://css-tricks.com/dynamic-dropdowns/

Answer 4

Не удается сделать это с небольшим количеством кода. That's what I've done.

var from = $('#abs-from-1'); 
var to = $('#abs-to-1'); 

from.change(function() { 
    var selectedValue = parseInt($(this).val()); 
    to.find('option').prop('disabled', false).filter(function() { 
     return parseInt(this.value) < selectedValue; 
    }).prop('disabled', true); 
}); 

to.change(function() { 
    var selectedValue = parseInt($(this).val()); 
    from.find('option').prop('disabled', false).filter(function() { 
     return parseInt(this.value) > selectedValue; 
    }).prop('disabled', true); 
}); 

Update: Использование порядкового индекса опционных тегов также может быть вариант. Вот еще fiddle.

var from = $('#abs-from-1'); 
var to = $('#abs-to-1'); 

from.change(function() { 
    var selectedIndex = this.selectedIndex; 
    to.find('option').prop('disabled', false).filter(function (index) { 
     return index < selectedIndex; 
    }).prop('disabled', true); 
}); 

to.change(function() { 
    var selectedIndex = this.selectedIndex; 
    from.find('option').prop('disabled', false).filter(function (index) { 
     return index > selectedIndex; 
    }).prop('disabled', true); 
});