阻止从不同的选择框中选择相同的选项

Question

来自W3schools示例（不要对W3School做任何评论，我只是用它作为示例）。 一个选择选项如下：

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

比方说，我有相同的name

<select name="name[]"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

<select name="name[]"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

现在二人select选择，我想使用jQuery来完成的，如果有人选择一个选项从第一次选择..他/她不能从第二次选择中选择它。我怎么能做到这一点？即如果在第一次选择时选择了第二次选择，我该如何自动删除Volvo？ 如果不可能使用jQuery，那我该如何防止它使用PHP？

我的猜测是使用array_unique：【发布问题后编辑]

foreach(array_unique($_POST['name']) as $name){ 
     if (!empty($name)){ 
       // do something 
     } 

这question是有关我的。不过，我不希望该选项被禁用。我想要删除或隐藏选项。另外，我想看看它如何使用PHP

Answer 1

小提琴：http://jsfiddle.net/jFMhP/

要通过所有选择，请使JavaScript像：

$('select').change(function() { 
    var myOpt = []; 
    $("select").each(function() { 
     myOpt.push($(this).val()); 
    }); 
    $("select").each(function() { 
     $(this).find("option").prop('hidden', false); 
     var sel = $(this); 
     $.each(myOpt, function(key, value) { 
      if((value != "") && (value != sel.val())) { 
       sel.find("option").filter('[value="' + value +'"]').prop('hidden', true); 
      } 
     }); 
    }); 
}); 

而且这将删除所有其他选择的选项。

备用选项

备用选项只使用“命名的”选择的jsfiddle：http://jsfiddle.net/jlawrence/HUkRa/2/ 代码：

$('select[name="name[]"]').change(function() { 
    var myName = '[name="name[]"]'; 
    var myOpt = []; 
    $("select"+ myName).each(function() { 
     myOpt.push($(this).val()); 
    }); 
    $("select"+ myName).each(function() { 
     $(this).find("option").prop('hidden', false); 
     var sel = $(this); 
     $.each(myOpt, function(key, value) { 
      if((value != "") && (value != sel.val())) { 
       sel.find("option").filter('[value="' + value +'"]').prop('hidden', true); 
      } 
     }); 
    }); 
}); 

Answer 2

您可以使用hidden属性（或者干脆.hide()，display: none）暂时隐藏必要的选项来完成，因此，不可能将其选中：

var $second = $('.select-two'); 
$('.select-one').change(function() { 
    $second.find('option').prop('hidden', false) 
    .filter('[value="' + $(this).val() + '"]').prop('hidden', true); 
    $(this).val() == $second.val() && $second.val(''); 
}); 

http://jsfiddle.net/FDRE7/

当然，我们也可以把它在两个方向上工作：

var $select = $('.select').change(function() { 
    var $other = $select.not(this); 
    $select.find('option').prop('hidden', false) 
    .filter('[value="' + $(this).val() + '"]').prop('hidden', true); 
    $(this).val() == $other.val() && $other.val(''); 
}); 

http://jsfiddle.net/FDRE7/1/

您可能还想在服务器端验证此数据。在这种情况下，如果用户选择了相同的值，则POST数组看起来像：

Array 
(
    [name] => Array 
     (
      [0] => mercedes 
      [1] => mercedes 
     ) 
) 

所以它很容易检查：

if ($_POST['name'][0] == $_POST['name'][1]) { 
    // not allowed, redirect back 
} 

或

if (count(array_unique($_POST['name'])) == 1) { 
    // not allowed, redirect back 
}