基於所選答案的jQuery/JavaScript的變化選擇相應的選項

Question

我有以下代碼：

<table> 
<tr><td>Item</td><td>Ranking</td></tr> 
<tr><td>Apples</td><td><select id="apple" name="apple"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Oranges</td><td><select id="oranges" name="oranges"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Bananas</td><td><select id="bananas" name="bananas"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Lemons</td><td><select id="lemons" name="lemons"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Limes</td><td><select id="limes" name="limes"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi"> 
    <option value="#" selected="selected">Rank...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select></td></tr> 

中的jsfiddle

這裏：http://jsfiddle.net/XNYU2/

我想明白這是可能的，如果是這樣，無論是jQuery還是Javascript是最好的解決方案，以及如何實現它。

這是一個排名系統，我需要發生的事情很簡單。如果用戶從任何下拉列表中選擇任何值，則需要從其他下拉列表中刪除該值。相反，如果用戶取消選擇該值，則需要返回到所有下拉菜單。

Answer 1

試試這個：

$(function() { 
    $('select').on('change', function(event){ // This binds listeners to the change event on all the select elements 
     var sId = this.id; // store off the changed element id 
     var vId = this.value; // store off the changed element value 
     $('select').each(function(){ // this loops across the same set of elements 
      if(this.id != sId && this.value == vId) { // If it is not the triggering element and the value is the same, do something 
       this.options.selectedIndex = 0; // reset the value to 'rank' 
      } 
     }); 
    }); 
}); 

您可以在任何的jQuery或純JS做到這一點，但jQuery選擇肯定可以很容易地遍歷元素和用很少的代碼適用於變化的行動。

在重新閱讀您的問題時，這會完成相同的事情，但稍有不同;用戶被迫只有一組有序排列而沒有重疊，但是我們不必去掉刪除/添加選項的麻煩。

Answer 2

是的，這是JavaScript的一項任務。 jQuery不是JavaScript的替代品，但基本上它是一個工具集，它使得瀏覽器元素的操作更容易。我建議使用它，即使您需要了解JavaScript基本知識才能有效使用它。

這裏的關鍵是分解你的問題;一種是在選擇已被改變時執行動作。在這裏看到這是怎麼完成的：http://api.jquery.com/change/

第二個動作是實際執行這個變化，例如，這裏 Removing an item from a select box

Answer 3

的jsFiddle是在這裏，這是代碼：

var SelectOptions = ['Rank...', 1, 2, 3, 4, 5]; 

$(document).ready(function() { 

    $('#TheTable').find('select').change(function() { 

     var TheSelectedValue = parseInt($(this).val(), 10); 
     var TheSelectID = $(this).prop('id'); 
     var TheHTML = ""; 

     for (var i = 0; i < SelectOptions.length; i++) { 

      if (SelectOptions[i] !== TheSelectedValue) { 

       TheHTML = TheHTML + '<option value="'; 
       TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i]; 
       TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>'; 
      } 
     } 

     $('#TheTable').find('select').each(function() { 

      if ($(this).prop('id') !== TheSelectID) { 

       $(this).html(TheHTML);   
      } 
     }); 
    }); 
}); 

這只是其中一個辦法做到這一點：我把它放在一起幾分鐘，我敢肯定，這可以改善，但應該讓你開始。