Question

我遇到涉及multiple select菜单的问题。用户可以从Selectbox A中select多个项目并将其添加到Selectbox B.每次添加按钮为jQuery时，我都会使用clicked将项目添加到数组中并填充选择框B使用foreach中的loop php，并且大部分工作正常。

但问题是，当用户将第一个项目添加到Selectbox A时，它会添加项目，但也会添加一个我不想要的空option标记。有什么办法可以解决这个问题吗？

这是我的HTML代码：

<select multiple="multiple" id="active" name="activecontributors[]">
    <option value="0"> </option>
</select>

这是我的JQuery代码：

var drop2html = $("#active").html();        
    //ADD/REMOVE functionality for the contributors select boxes. 
    $('#addBtn').click(function (e) {//Adding
        e.preventDefault();
        $('#compresult option:selected').each(function(){
            drop2html += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
        })
        $("#active").html(drop2html);
    });

    $('#removeBtn').click(function (e){//Removing
         e.preventDefault();
         $('#active option:selected').each(function(){
             $('#active option:selected').remove();
        })
        drop2html = $('#active').html();
    });

     //on submit select all the options in active contributors...
    $('#mainform').submit(function(){
        $("#active option").attr("selected", "selected");
     });

由于某些原因，当页面加载时，它始终显示option标记。如果可能，我希望我的选择框不显示option标记。

Answer 1

因为该菜单中已存在空选项。

$('#compresult option:selected').each(function(){
        drop2html = '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
})

尝试此操作而不附加到字符串或

var drop2html = '';

将空值存储到它。

Answer 2

您可以使用下面没有drop2html变量的代码来解决您的问题：

$(function(){
    //remove empty option from active
    $('#active option').remove();

    $('#addBtn').click(function (e) {//Adding
            e.preventDefault();
            $('#compresult option:selected').each(function(){
                $('#active').append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>');
            })
        });

        $('#removeBtn').click(function (e){//Removing
             e.preventDefault();
             $('#active option:selected').each(function(){
                 $('#active option:selected').remove();
            })
        });
});

JQuery在选择菜单中创建不需要的选项标签

2 个答案: