javascript - 如何在 JavaScript 中单击时向另一个选定列表添加和删除多个选定列表值

Question

我被困在这里并且我是 JavaScript 新手。我总共有四个选择列表框。这里我选择前三个选择列表框值。选择值后，我想将这些值存储在单击(添加类别)的第四个选择列表框中，并且当单击删除类别按钮时，应删除这些值。

<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> field 。尝试这样的事情:

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