JavaScriptでクリックしたときに選択した複数のリストの値を別の選択リストに追加＆削除する方法

Question

私はここにいます& JavaScriptが新しくなっています。私は4つの選択リストボックスを完全に持っています。ここでは、最初の3つの選択リストボックス値を選択します。値を選択したら、カテゴリの削除ボタンをクリックすると、その値をクリック（Add Category）&の4番目の選択リストボックスに保存すると、それらの値は削除されます。

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