Question

我有三个相同的下拉菜单。我想从drop1中选择一个值，并从drop2中排除该值。然后drop3中的选择应排除1＆amp; 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>

Answer 1

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

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

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

更流畅的解决方案是使用AJAX来使用侦听器来查看用户何时单击某个字段，将java值设置为该字段并使用类似的＆＃34; if then then show＆＃34; java脚本变量上的方法，用于隐藏其他表单中包含该值的字段。

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

<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>

Answer 2

您可以使用更改事件并从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);
});

如何根据下拉列表从下拉列表中排除项目

2 个答案: