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

Question

I am having an issue involving a multiple select menu. The user has the ability to select multiple items from Selectbox A and add them to Selectbox B. I Use jQuery to add the items to an array each time the add button is clicked and populate Selectbox B using a foreach loop in php and for the most part it is working fine.

However the issue is that when the user adds the first item to Selectbox A it adds the item but also an empty option tag which I do not want. Is there anything I can do to resolve this?

This is my HTML code:

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

This is my JQuery code:

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

For some reason when the page loads it always shows the option tag. I would like for my select box to show no option tag if possible.

Answer 1

its because of the empty option already present in that menu.

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

try this for without appending to the string or

var drop2html = '';

store empty value to it.

Answer 2

You can use below code without drop2html variable and get rid of your problem :

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