Attach dropdowlist item and a li Asp.net mvc

Question

I have a view with dropDowlist that contains data that comes from the database and just below put a buttom that when I click will attach the selected dropdownlist item in a list, I made a code here but is not attaching, if I put predefined values works, but dropDowlist values do not.

javascript

        $("#addPeca").click(function () {  
        var resultData = $("#ListaPecas option:selected").text();  
        $(document).ready(function () {
            var myselect = $('<ul>');
            $.each(resultData, function (index, key) {
                myselect.append($('<li></li>').val(key).html(key));
            });
            $('#listPeca').append(myselect.html());
        });

    });

In my view

        <div class="form-group">
        @Html.LabelFor(model => model.ListaPecas, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.PecasId,Model.Pecas,"Pecas",  new { @class = "form-control" } )
            @Html.ValidationMessageFor(model => model.ListaPecas, "", new { @class = "text-danger" })

            <button class="btn  btn-info" type="button" id="addPeca">Adicionar</button>
        </div>

    </div>

List where the selected value will be attached

  <ul id="listPeca"></ul>

Answer 1

Solved, I was putting wrong dropdowlist id so it’s returning Undefined, now it’s right.

        <div class="form-group">
    @Html.LabelFor(model => model.ListaPecas, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.PecasId,Model.Pecas,"Pecas",  new { @class = "form-control" } )
        @Html.ValidationMessageFor(model => model.ListaPecas, "", new { @class = "text-danger" })

        <button class="btn  btn-info" type="button" id="addPeca">Adicionar</button>
    </div>

    <div class="col-md-10">
        <ul id="ListPeca"></ul>
    </div>

javascript

            $("#addPeca").click(function () {
            //Váriavel para checar se já existe na lista
            var chkRptTag = false;

            $('#ListPeca li').each(function () {
                haveSomeLi = true;
                var current = $(this).text();
                if (current == $("#PecasId option:selected").text()) {
                    chkRptTag = true;
                }
            });

            if (!chkRptTag) {
                $("#ListPeca").append("<li>" + $("#PecasId option:selected").text() + "<input type='checkbox' name='chkTags' id='chkTags' class='chkTags' checked='checked' value='" + $("#PecasId option:selected").val() + "'></li>");
            } else {
                alert("Peca Já inserida!");
            }
        });


        $('#ListPeca').on('click', "li", function () {
            $(this).remove();
            //alert();
            return false;
        });

Answer 2

It doesn’t make sense that you have one $(document).ready() within the button click event #addPeca. I modified and transferred the logic of manipulation from your <ul id="ListPeca"> for a method that is executed by clicking the button, as well as loading the page, so it would already be mounted via JQuery with options marked as selected in the rederization of View for @Html.DropDownListFor().

$(document).ready(function() {
  $("#addPeca").click(function() {
    atualizaLista();
  });
  
  //primeira carga com as opções que já vieram selecionadas
  atualizaLista();
});

var atualizaLista = function() {
  //limpando o conteúdo da lista
  $("#ListPeca").html('');

  var resultData = $("#ListaPecas option:selected");
  var myselect = $('<ul>');
  $.each(resultData, function(index, key) {
    var peca = $(key);
    myselect.append($('<li>' + $(key).text() + '</li>'));
  });
  $(myselect.html()).appendTo("#ListPeca");
};

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="ListaPecas" class="control-label col-md-2">
  Lista de Peças:
  </label>
  <div class="col-md-10">
    <select id="ListaPecas" class="form-control" placeholder="Lista de peças" multiple>
          <option value="peca1" selected>Peça 1</option>
          <option value="peca2">Peça 2</option>
          <option value="peca3" selected>Peça 3</option>
          <option value="peca4">Peça 4</option>
        </select>
    <button class="btn  btn-info" type="button" id="addPeca">Adicionar</button>
  </div>
  <div class="col-md-10">
    <ul id="ListPeca">

    </ul>
  </div>

</div>

Obs.: Just because your code makes it a little difficult to understand your objective, I leave a preview of the reply and after you explain better the expected behavior I edit.