javascript - jQuery在另一个div中使用Feed添加/删除相同的下拉选项

基本上，我想创建动态下拉菜单，如果用户选择一个选项，它将进入下拉菜单，稍后用户可以通过单击“删除”按钮将其删除，然后该选项又回到下拉菜单。我已经创建了，如果用户选择一个选项，它将进入下拉菜单。另外，我已经弄清楚了如何删除相同的选项。我开始遇到问题的地方：

1）在用户单击删除按钮后，我不知道如何在下拉菜单中添加相同的选项
2）如果选择了多个选项，则会将多个选项添加回下拉列表。

这是我的代码和jsfiddle：
https://jsfiddle.net/wjybpLuk/

    $('#dropdown_test').click(function() {
      if ($(this)[0].selectedIndex == 0) {
        //do nothing
      } else {
        $("#selected_options").append('<div class="selected_lang">' + $('option:selected', this).val() + ' <a class="remove_lang" href="javascript:(0)">Remove</a>' + "; " + '</div>');
        $('option:selected', this).remove();
        $("#dropdown_test").val($("#dropdown_test option:first").val());
      }

      $('.remove_lang').click(function() {
        $(this).closest('.selected_lang').remove('.selected_lang');

        $('#dropdown_test').append('<option>' + $('.selected_lang', this).html() + '</option>');
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
  <label for="dropdown_test">Select me</label>
  <select id="dropdown_test">
    <option selected disabled value="default">Select...</option>
    <option value="lang01">lang01</option>
    <option value="lang02">lang02</option>
    <option value="lang03">lang03</option>
    <option value="lang04">lang04</option>
  </select>
  <div id="selected_options">

  </div>
</form>

最佳答案

校验
Fiddle

您必须使用委托事件绑定

$(document).on('click','.remove_lang',function(e) { }和

使用e.preventDefault()作为当前代码提交表单。