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，如何从第二个选择中自动删除array_unique？如果使用jQuery是不可能的，那么如何使用PHP来阻止它？

我的猜测是使用foreach(array_unique($_POST['name']) as $name){ if (!empty($name)){ // do something }：

{{1}}

[发布问题后编辑]

这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);
            }
        });
    });
});

这将删除所有其他选项中的选项。

替代选项

Alternate Option只使用'named'选择器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
}

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

2 个答案: