禁用在HTML列表框

Question

一個選項我有3個列表框，其顯示相同的選項。我想禁用在列表框中選擇的其他兩個列表框中的選項。我想讓我的用戶先去任何列表框。任何幫助表示讚賞。

Answer 1

如果您有以下HTML：

<select id="select1"> 
    <option value="">Choose</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 

<select id="select2"> 
    <option value="">Choose</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 

<select id="select3"> 
    <option value="">Choose</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 

你可以做到這一點（與jQuery的幫助下）：

var previousValues = [] 
    $selects = $('#select1, #select2, #select3'); 

$selects 
    .mousedown(function(e) { 
     // save the previous value for re-enabling it when you change 
     var val = $(this).val(); 
     if (val) { 
      previousValues[this.id] = val; 
     } 
    }) 
    .change(function(e) { 
     // get the other select elements 
     var $theOtherSelects = $selects.not('#' + this.id), 
      prevVal = previousValues[this.id], 
      val = $(this).val(); 

     // re-enable the previously disabled option 
     if (prevVal) { 
      $theOtherSelects 
       .find('option[value=' + prevVal + ']') 
       .prop('disabled', false); 
     } 

     // if a value is selected, disble in the other selects    
     if (val) { 
      $theOtherSelects 
       .find('option[value=' + val + ']') 
       .prop('disabled', true); 
     } 
    }) 
    .mousedown() 
    .change(); 

這裏的jsfiddle你一起玩。

注意：我使用過jQuery，因爲它更容易，可以跨瀏覽器工作，並且你沒有指定你不想明確使用它。

Answer 2

您可以設置每個選項的一些獨特的屬性（其值可能就足夠了，否則類是一個不錯的選擇），並使用jQuery選擇，當它在選擇中的一個選擇刪除其他兩個一個選項。

編輯：這是一條什麼沿着你想要的東西線的例子。你必須自己修改一下。不過，迪迪爾的答案可能更接近你想要的。

http://jsfiddle.net/baByZ/39/