阻止从其他选择框中选择相同的选项

Question

从W3schools的例子(不要对W3Schools做任何评论我只是用它作为一个例子).选择选项如下所示:

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

让我们说我有两个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> 

现在,我想用jQuery实现,如果有人从第一个选择中选择了一个选项,他/她就无法从第二个选择中选择它.我怎么能做到这一点？即,Volvo如果在第一个选择中选择了它,如何从第二个选择中自动删除？如果使用jQuery是不可能的,那么如何使用PHP来阻止它呢？

我的猜测是使用array_unique :

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

[发布问题后编辑]

这个问题与我的相关.但是,我不希望禁用该选项..我希望删除或隐藏选项.另外,我想看看如何使用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);
            }
        });
    });
});