禁用在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/