JQuery Disabled Dropdown-Optionen basierend auf der Auswahl von einem anderen

Question

Ich habe zwei Dropdown-Listen. Jeder enthält die gleiche Liste von Zeiten. Wenn eine Zeit in der Liste "A" ausgewählt ist, möchte ich dieselben und alle früheren Zeiten in der Liste "B" deaktivieren.

List A     List B 
------     ------ 
06:00 AM     06:00 AM 
07:00 AM     07:00 AM 
08:00 AM     08:00 AM 
...      ... 

Also, wenn jemand auf etwa 07.00 Uhr in der Liste „A“ klickt, die Zeit und vor in Liste „B“ würde deaktiviert werden.

$('#listA').on('change', function(){ 
    ... 
}); 

+1 für wirtschaftliche Codierung.

UPDATE

landete ich dies bis zu tun, die es in beide Richtungen fängt:

function setDisableOptions(from, to) { 
    $(document.body).on('change', '[name="' + from + '"]', function() { 
     var s = $(this).prop('selectedIndex') + 1; 
     var l = $('[name="' + from + '"] option').length; 
     $(this).find('option').prop('disabled', false); 
     for (var i = 0; i <= l; i++) { 
      if (i <= s) { 
       $('[name="' + to + '"] > option:nth-child(' + i + ')').attr('disabled', 'disabled'); 
      } else { 
       $('[name="' + to + '"] > option:nth-child(' + i + ')').removeAttr('disabled'); 
      } 
     } 
    }); 
    $(document.body).on('change', '[name="' + to + '"]', function() { 
     var s = $(this).prop('selectedIndex') + 1; 
     var l = $('[name="' + to + '"] option').length; 
     $(this).find('option').prop('disabled', false); 
     for (var i = 0; i <= l; i++) { 
      if (i >= s) { 
       $('[name="' + from + '"] > option:nth-child(' + i + ')').attr('disabled', 'disabled'); 
      } else { 
       $('[name="' + from + '"] > option:nth-child(' + i + ')').removeAttr('disabled'); 
      } 
     } 
    }); 
}; 

, die wie genannt wird:

setDisableOptions('fromInputName', 'toInputName'); 

Answer 1

Dies ist eine bessere und elegante Art und Weise, dies zu tun (edit aus dem Code)

$('select').change(function() { 
 
    var s = $(this).prop('selectedIndex')+1; 
 
    var selected = $(this); 
 
    var fcontrol = function() { 
 
     if (selected.attr('id') == 'listA') { 
 
     \t return $(this).index()+1 < s; 
 
     } else { 
 
     \t return $(this).index()+1 > s; 
 
     }; 
 
    } 
 
    var others = $(this).siblings('select').children() 
 
    others.prop('disabled', false).filter(fcontrol).prop('disabled', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="listA" size="5"> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
    <option>Four</option> 
 
    <option>Five</option> 
 
</select> 
 
<select id="listB" size="5"> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
    <option>Four</option> 
 
    <option>Five</option> 
 
</select>

Answer 2

Diese

$('#listA').on('change', function(){ 
 
\t var s = $(this).prop('selectedIndex')+1; 
 
\t var l = $("#listA option").length; 
 
\t for(var i = 0; i <= l; i++){ 
 
\t \t if(i <= s) { 
 
\t \t \t $("#listB > option:nth-child(" + i + ")").attr('disabled','disabled'); 
 
\t \t } else { 
 
\t \t \t $("#listB > option:nth-child(" + i + ")").removeAttr('disabled'); 
 
\t \t } 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="listA" name="sometext" size="5"> 
 
    <option>text1</option> 
 
    <option>text2</option> 
 
    <option>text3</option> 
 
    <option>text4</option> 
 
    <option>text5</option> 
 
</select> 
 
<select id="listB" name="sometext" size="5"> 
 
    <option>text1</option> 
 
    <option>text2</option> 
 
    <option>text3</option> 
 
    <option>text4</option> 
 
    <option>text5</option> 
 
</select>

helfen kann