阻止從不同的選擇框中選擇相同的選項

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 
}