如果已先選擇，則從第二個選擇中刪除選項

Question

我正在嘗試制作一個體育博彩頁面。 用戶需要選擇哪兩支球隊正在比賽。
所以，我有兩個select ，我需要從第二個select刪除一個option ，因為一個團隊不能自己玩。
以下是精選：

    <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 解決方案：

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

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

Answer 2

對於后代，您可以在沒有庫的情況下完成此操作，也無需額外的代碼。 該解決方案還使用較少的函數調用和直接訪問屬性而不是選擇器，因此應該更高效。

策略是禁用在另一個選擇中選擇的任何選項。 同時，它啟用所有其他選項。
禁用選項在較舊的瀏覽器中可能不起作用 - 您可能必須刪除並替換它們。

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

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

上述解決方案還允許用戶同時選擇兩個選擇中的第一個選項（“選擇一個...”）。

Answer 3

您可以在jQuery輕松完成

$('.form-control[name=team1]').on('change', function(e){
   var thisVal = $(this).val();
   $('.form-control[name=team2] option').each(function(){
      if(thisVal == $(this).attr('value')){
         $(this).attr('disabled', 'disabled');
       }else{
         $(this).removeAttr('disabled');
       }
   })
})

檢查這個https://jsfiddle.net/uLqpfqr7/

Answer 4

試試這個例子：你可以處理兩個選擇框

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