Question

我应该做些什么才能在选择中没有重复？如果我的select1 = subject1，select2和select3选项= subject1应该被禁用，如果select1 = subject1，select2 = subject2，select3选项subject1和subject2应该被禁用。对不起英语不好;（

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		$('document').ready(function() {
			$('select.remRep').on('change', function() {
				var index1 = $(this).val();
							$.each($('select.remRep option'), function() {
							$(this).removeAttr('disabled');
							});	
				switch (index1) {
					case "1" :
						$('select.remRep option[value="1"]').attr('disabled','disabled')
					break;
					case "2" :
						$('select.remRep option[value="2"]').attr('disabled','disabled')
					break;
					case "3" :
						$('select.remRep option[value="3"]').attr('disabled','disabled')
					break;
          case "4" :
						$('select.remRep option[value="4"]').attr('disabled','disabled')
					break;
          case "5" :
						$('select.remRep option[value="5"]').attr('disabled','disabled')
					break;
				}
			});
		});
	</script>
</head>
<body>
	<select id="sel1" class="remRep">
		<option value="0">none</option>
    <option value="1">Subject1</option>
    <option value="2">Subject2</option>
    <option value="3">Subject3</option>
</select>
<select id="sel2" class="remRep">
		<option value="0">none</option>
    <option value="1">Subject1</option>
    <option value="2">Subject2</option>
    <option value="3">Subject3</option>
    <option value="4">Subject4</option>
    <option value="5">Subject5</option>
</select>
<select id="sel3" class="remRep">
		<option value="0">none</option>
    <option value="1">Subject1</option>
    <option value="2">Subject2</option>
    <option value="3">Subject3</option>
    <option value="4">Subject4</option>
    <option value="5">Subject5</option>
</select>
</body>
</html>

Answer 1

你走了。这会更新所有选项，但不会更新当前选项。

＆＃13;

rbf

＆＃13;

$('document').ready(function() {

  // put in yopur global scope.
  var previous;
  
  // add previous/current value in previous var when input in focus
  $('select.remRep').on('focus', function () {
    previous = this.value;
    
  // when the input detects a change
  }).on('change', function() {
    var t = $(this);
    
    //update the previous value to be enabled
    $('option[value=' + previous + ']').removeAttr('disabled');
    
    // disable new value in other inputs
    $('option[value=' + t.val() + ']').not(t).attr('disabled', true);
  });
});

＆＃13;

Answer 2

有两种方法可以实现这一目标：

$('#s1').find('option').eq(0).attr('disabled', true);
$('#s1 option[value="1"]').attr('disabled', true);

Working Fiddle

注意： attr()使用attr('disabled', 'true/false');

如果我们在另一个选择中选择此选项，则选择jquery disable选项

2 个答案: