Javascript 如何基于另一个下拉列表从下拉列表中排除项目

我有三个相同的下拉列表。我想从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>

1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.

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

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

如果$value！='1'{ 
回声“1”；
}

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

更平滑的解决方案是使用AJAX使用监听器查看用户单击某个字段时，java值被设置为该字段，并在java脚本变量上使用类似的“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>

1.
2.
3.
4.
5.

您可以使用change event并从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>';
        }
    }
});

?

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