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

Question

我遇到的问题涉及 multiple select菜单。用户有能力select来自选择框 A 的多个项目并将它们添加到选择框 B。我使用 jQuery每次添加按钮 clicked 时将项目添加到数组中并使用 foreach 填充选择框 B loop在php大多数情况下它运行良好。

但是问题是，当用户将第一个项目添加到选择框 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标签。我希望我的选择框显示 no option如果可能的话标记。

Answer 1

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

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

尝试这个而不附加到字符串或

var drop2html = '';

向其中存储空值。