Question

我有两个下拉列表。每个包含相同的时间列表。当选择列表“A”中的时间时，我想要禁用列表“B”中的相同和所有先前时间。

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

因此，当有人点击列表“A”中的07:00 AM时，列表“B”中的时间和先前将被禁用。

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

+1经济编码。

更新

我最终做到了这两种方式：

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' );
            }
        }
    } );
};

被称为：

setDisableOptions( 'fromInputName', 'toInputName');

Answer 1

这可能会有所帮助

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

<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>

Answer 2

这是一种更好，更优雅的方式（从您的代码编辑）

$('select').change(function () {
    var s = $(this).prop('selectedIndex')+1;
    var selected = $(this);
    var fcontrol = function () {
        if (selected.attr('id') == 'listA') {
        	return $(this).index()+1 < s;
        } else {
        	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>

基于来自另一个

2 个答案: