Question

请参阅HTML选择的图像

这里的想法是：如果用户选择＆＃34; A＆＃34;在第一个HTML选择列表中，＆＃34; A＆＃34;不应出现在其他HTML选择列表中。即使用户开始在中间的一个选择列表中选择，也应在所有列表中动态更新。下面的代码是一个部分不完美的不完整解决方案。我认为这是重复的。我想要做的是继续推断HTML选择列表中的选项，直到用户到达最后一个选择，只剩下一个选项。
选择有ids＆＃34; 1＆＃34;，＆＃34; 2＆＃34;等...... 我有以下 JQuery代码：

dataArray= np.load(trace)
  File "/usr/lib/python2.7/dist-packages/numpy/lib/npyio.py", line 370, in load
    fid = open(file, "rb")
IOError: [Errno 2] No such file or directory: 'trace14.npy'

任何容易的想法都将非常感激。提前感谢您的帮助。

Answer 1

以下是使用disabled而不是删除选项的示例。这也适用于取消选择或更改选项。

＆＃13;

$('select').change(function() {
  // find the other selects
  var otherSelects = $('select').not(this);
  // get the old value of this select
  var oldValue = $(this).data('old');
  //remove disabled from the other selects option for the old value
  if (oldValue)
    otherSelects.find('option[value=' + oldValue + ']').removeAttr('disabled');
  //add disabled for the other selects option for the new value
  if (this.value)
    otherSelects.find('option[value=' + this.value + ']').attr('disabled', 'disabled');
  // store the new value as old  
  $(this).data('old', this.value);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select>
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select>
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

＆＃13;

Answer 2

我看到我已经被击败了...但是由于我已经投入了相当多的时间，这里有一个解决方案可以真正删除已经选择的所有选项（减少到三个选项以使其更简单，只是需要调整选项对象）：

$(document).ready(function() {
var $allSelects = $('select.choice');

	$allSelects.change(function() {
  	var $this = $(this),
    	$otherSelects = $allSelects.not($this);
    
  	$otherSelects.each(function() {
    	var $this = $(this), currentVal = $this.val(), 
  		    options = {A: 0, B: 0, C: 0},
          newOptionsMarkup = '<option value=""></option>';
      
        for (o in options) {
       		if (o == currentVal || !$('option[value="' + o + '"]:selected', $allSelects.not($this)).length) {
          	newOptionsMarkup+= '<option value="' + o + '">' + o + '</option>';
          }      		
        }
    	$this.empty().html(newOptionsMarkup).find('option[value="' + currentVal + '"]').attr('selected', true);
  	});
   });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

根据enigmas对BenG解决方案的评论，如果您希望将所有选项保留在所有选项中并且只想重置其中已选择的其他选择列表，则可以使用以下方法：

$(document).ready(function() {
var $allSelects = $('select.choice');

	$allSelects.change(function() {
  	var $this = $(this),
        $otherSelects = $allSelects.not($this);
    
      $('option[value="' + $this.val() + '"]:selected', $otherSelects).parent().val('');
   });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

Answer 3

我看到自己被殴打了。无论如何，这是我的解决方案。

但是，每次选择某些内容时，此解决方案都需要进行O（n）操作才能生成＆＃34;使用过的＆＃34;价值，这不是理想的。

＆＃13;

$("#row1 > select").change(function() {
  var selected = [];
  $('#row1 > select').each(function() {
    selected.push(this.value);
  });
  $("#row1 > select option").prop('disabled', false);
  $.each(selected, function(index, value) {
    $("#row1 > select option[value='" + value + "']").prop('disabled', true);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row1">
  <select>
    <option disabled selected value>--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected value>--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected value>--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

＆＃13;

如何根据JQuery中的其他选项动态更改选择选项？

3 个答案: