Question

我有一个按钮，可以在javascript中将下拉菜单添加到页面中。下拉菜单都获得了相同的值，但是我希望能够确保其他下拉菜单无法与另一个下拉菜单中的选项选择相同的值。

像这样：

$(document).ready(function(){
    $("#test").on('click', function(){
            $("<tr><td><select class='selectClass' name='something[]' ><?php echo $s; ?></select></td>
             </tr>").appendTo("table");

         i++;
    });
});

$ s是选项：

foreach ($values as $object) {
    $s .= '<option value=\''.$object->id.'\'>
    '.$object->name.'</option>';
}

我知道我应该获取在javascript中选择的选项的值。之后，我应该将该选项与$object->id中的所有foreach进行比较。如果匹配，我不应该将该选项添加到变量$s，但我不知道如何执行此操作。问题是，可能有5个下拉菜单，并且它们都没有可能获得与在另一个中选择的选项相同的选项。未选择的值应该只在下拉菜单中可用

我该如何实际做到这一点？我正在考虑使用onchange，但我真的不知道这是不是这样，怎么做？

Answer 1

你可以使用jQuery

$(function() {
    $(document).on('change', '.selectClass', function (e) {
        removeOthr();           
    });

    function removeOthr()
    {

        //enable all options///
        $('.selectClass option').each(function () {
            // $(this).prop('disabled', false);
            $(this).show();
        });

        $('.selectClass option:selected').each(function () {
           var select = $(this).parent(),
           optValue = $(this).val();
           // alert(optValue);

           if($(this).val()!=''){
               $('.selectClass').not(select).children().filter(function(e){
                   if($(this).val()==optValue)
                       return e
               // }).prop('disabled', true);
               }).hide();
           }
        });
    }
});

只需将selectClass分配给每个下拉列表。

Working jsFiddle

通过此代码（假设），您可以选择包含A，B，C，D，E，F的下拉列表。然后，一旦用户从任何下拉列表中选择A，然后＆＃34; A＆＃34;将删除所有其他下拉列表。同样适用于所有选项。并再次取消选择将进一步提供的选项。

下一个下拉菜单无法在另一个下拉菜单中使用已有的值

1 个答案: