如何添加＆amp;单击JavaScript，将多个选定列表值删除到另一个选定列表

Question

我被困在这里＆amp;我是JavaScript的新手。我总共有四个选择列表框。在这里，我选择前三个选择列表框值。选择值后，我想将这些值存储在第四个选择列表框中点击（添加类别）＆amp;单击“删除类别”按钮时，应删除这些值。

<select class="form-control select-manage-category" size="5">
    <option>1</option>
    <option>2</option>
</select>
<select class="form-control select-manage-category1" size="5">
    <option>1</option>
    <option>2</option>
</select>
<select class="form-control select-manage-category2" size="5">
    <option>1</option>
    <option>2</option>
</select>
<p class="text-center color-red">You can add up to 10 categories</p>
<input id="add-category" name="add" type="button" value="Add Category">
<input id="remove-category" name="add" type="button" value="Remove Category">
<select id="selected-lst-values" class="form-group percent-100" size="5">
    <option></option>
    <option></option>
    <option></option>
</select>
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong> 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span>
</button>

Jquery的：

$(document).ready(function() {
    var one = $('.select-manage-category').val();
    var two = $('.select-manage-category1').val();
    var three = $('.select-manage-category2').val();
    $('#add-category').click(function() {
        $(
            '.select-manage-category, .select-manage-category1, .select-manage-category2'
        ).each(function() {
            $('#selected-lst-values').append($(this).val());
        });
    });

Answer 1

$('#selected-lst-values').append($(this).val());正在尝试将字符串附加到<select>字段。尝试类似：

$('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');

根据您希望按钮的工作方式，您可以执行以下任一操作：

//Remove the values selected in the top 3
$('#remove-category').click(function() {
    $('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function() {
        $('#selected-lst-values')
               .find('option[value="' + $(this).val() + '"')
               .remove();
    });
});


//Remove the values selected in the bottom
$('#remove-category').click(function() {
    $('#selected-lst-values').find('option:selected').remove();
});