Question

我尝试制作体育博彩页面。用户需要选择正在与另一个队伍比赛的队伍。所以我有两个选择，我需要从第二个选择中删除相同的选项，因为一个团队不能自己玩。这是选择：

    <select class="form-control" name="team1">
        <option value="Steaua Bucuresti">Steaua Bucuresti</option>
        <option value="CSU Craiova">CSU Craiova</option>
        <option value="FC Viitorul">FC Viitorul</option>
        <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
        <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
    </select>
    <select class="form-control" name="team2">
        <option value="Steaua Bucuresti">Steaua Bucuresti</option>
        <option value="CSU Craiova">CSU Craiova</option>
        <option value="FC Viitorul">FC Viitorul</option>
        <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
        <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
    </select>

Answer 1

以下是适合您的Jquery解决方案：

＆＃13;

$('select[name=team2]').on('change', function() {
   var self = this;
   $('select[name=team1]').find('option').prop('disabled', function() {
       return this.value == self.value
   });
});

$('select[name=team1]').on('change', function() {
  var self = this;
  $('select[name=team2]').find('option').prop('disabled', function() {
      return this.value == self.value
  });
});

＆＃13;

<select class="form-control" name="team1">
  <option value="">Please select a team...</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<select class="form-control" name="team2">
  <option value="">Please select a team...</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

＆＃13;

Answer 2

您可以在uint8_t

中轻松完成

jQuery

选中此https://jsfiddle.net/uLqpfqr7/

Answer 3

尝试此示例：您可以同时处理两个选择框

$(document).ready(function(){
 $("#team1").change(function(){
   var anotherTeam = $("#team2").val();
   var team = $(this).val();
   if(team !='' && team==anotherTeam){
     alert("This team already selected.");
     $('option:selected',this).removeAttr('selected');
     $("option:first",this).attr('selected','selected');
   }
 });
     
 $("#team2").change(function(){
   var anotherTeam = $("#team1").val();
   var team = $(this).val();
   if(team !='' && team==anotherTeam){
     alert("This team already selected.");
     $('option:selected',this).removeAttr('selected');
     $("option:first",this).attr('selected','selected');
     
   }
 });
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="team1" id="team1">
  <option value="">Select One</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<select class="form-control" name="team2" id="team2">
  <option value="">Select One</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>

Answer 4

对于后代，您可以在没有库且没有其他代码的情况下执行此操作。这也使用较少的函数调用和直接属性访问而不是选择器，因此应该更有效。

策略是在一个选项中禁用该选项，只要在另一个选项中选择该选项并启用所有其他选项。禁用选项可能无法在旧版浏览器中使用，您可能需要删除并替换它们。

＆＃13;

window.onload = function(){

  document.forms[0].team1.addEventListener('change', function(){
    [].forEach.call(this.form.team2.options, function(opt) {
      opt.disabled = opt.index == this.selectedIndex && opt.index != 0;
    }, this);
  }, false);
  
  document.forms[0].team2.addEventListener('change', function(){
    [].forEach.call(this.form.team1.options, function(opt) {
      opt.disabled = opt.index == this.selectedIndex && opt.index != 0;
    }, this);
  }, false);
};

＆＃13;

<form>
  <select class="form-control" name="team1">
    <option>Select one&hellip;
    <option value="Steaua Bucuresti">Steaua Bucuresti</option>
    <option value="CSU Craiova">CSU Craiova</option>
    <option value="FC Viitorul">FC Viitorul</option>
    <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
    <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
  </select>
  <select class="form-control" name="team2">
    <option>Select one&hellip;
    <option value="Steaua Bucuresti">Steaua Bucuresti</option>
    <option value="CSU Craiova">CSU Craiova</option>
    <option value="FC Viitorul">FC Viitorul</option>
    <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
    <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
  </select>
</form>

＆＃13;

上述内容还允许用户在两个选项中选择第一个选项（＆＃39;选择一个...＆＃39;）。

如果已经先选择

4 个答案: