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

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
        }

[发布问题后编辑]

这个question 与我的相关。但是，我不希望禁用该选项。我希望删除或隐藏该选项。另外，我想看看如何使用 PHP 来完成

Answer 1

您可以使用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
}

Answer 2

小提琴：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);
            }
        });
    });
});