Question

我是JavaScript和jQuery的新手。我有一个从数据库中检索到的下拉列表。当我选择任何一个时，它会添加为文本，并从下拉列表中删除。并为每个文本放置一个按钮，如果我想删除任何一个。单击“删除”按钮时，它会再次附加到选择列表中。

我的问题是，当我删除任何文本选项时，它会追溯到下拉列表选项列表作为空白选项。

我想将删除的选项作为文本附加回选择列表。我不知道我做错了什么。

      $(document).ready(function() {
         $('#location').click(function() {
            if($(this).find( "option:selected").val() != 0) {
               $('#Locality').append("<div><input type='text' class='field' value='" + $(this).find( "option:selected").text() + "' disabled/><input type=\"button\" class='removeBtn' value=\"Remove\" id=\"removeBtn\" /></div>");
               $(this).find("option:selected").remove();
             }
             $('.removeBtn').on('click', function () { 
                $(this).parent().remove();
                $("#location").append('<option>' + $(this).parent().text() + '</option>');
             });
          });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Locality">
       <select name="supplyLocation" id="location" >
           <option value="0">Select Locality</option>
       </select>
    </div>

Answer 1

这对我有用，但当你把它放回选择菜单时它将是最后一个选项，这里是一个JsFiddle https://jsfiddle.net/9tLc1pa4/1/

<强> JS

$(document).ready(function() {
     $('#location').change(function() {
        if($(this).find( "option:selected").val() != 0) {
           $('#Locality').append("<div><input type='text' class='field' value='" + $(this).find( "option:selected").text() + "' disabled/><input type=\"button\" class='removeBtn' value=\"Remove\" id=\"removeBtn\" /></div>");
           $(this).find("option:selected").remove();
         }
         $('.removeBtn').on('click', function () { 
            $(this).parent().remove();
            var text = '<option>' + $(this).parent().find('input').val() + '</option>';
            $("#location").append(text);
         });
      });
  });

在选择列表中添加删除选项

1 个答案: