-4

我有三个相同的下拉菜单。我想从 drop1 中选择一个值并将该值从 drop2 中排除。那么 drop3 中的选择应该排除 1 和 2。有什么想法吗？

<select name="drop1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="drop2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<select name="drop3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
4

2 回答 2

0

您可以使用更改事件并从 dom 中删除选定的元素

$('select[name=drop1]').change(function() {
    var drop2 = $('select[name=drop2]').empty().hide();
    var exclude = $(this).val();
    var size = $(this).children().length;
    for (var i=0; i<size; ++i) {
        if (i != exclude) {
           drop2.append('<option value="' + i + '">' + i + '</option>';
        }
    }
});

如果您有更复杂的示例并且您需要基于价值的 explude，您可以创建一个克隆。

var clone = $('select[name=drop2]').clone();
$('select[name=drop1]').change(function() {
    var copy = clone.clone();
    copy.find('option[value=' + $(this).val() + ']').remove().end();
    $('select[name=drop2]').replaceWith(copy);
});
于 2013-01-07T20:19:32.653 回答
0

根据您对 PHP 或 AJAX 的熟悉程度，您有两种解决方案。如果您对 PHP 更熟悉，您可以让用户从一个选择表单中提交数据，然后使用 if 语句，例如

if $value != '1'{ 
echo '<option value="1">1</option>'; 
}

并为第二种形式的每个字段执行此操作；然后将其复制到第三种形式。

看起来更流畅的解决方案是使用 AJAX 使用侦听器来查看用户单击字段时将 java 值设置为该字段并在 java-script 变量上使用类似的“if then show”方法来隐藏包含的字段其他形式的值。

最简单的解决方案之一也是允许多项选择（假设您对使用一种表单的外观没问题，并且表单之间的值与您上面给出的示例相同）......该示例是：

<select id="my_num" name="my_num" size="5" multiple="multiple" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
于 2013-01-07T20:11:35.650 回答