Attach Dropdowlist Item and a li asp.net mvc

Question

Attach Dropdowlist Item and a li asp.net mvc

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a View with dropDowlist that contains data that comes from the database and right down I put a buttom that when I click it will attach the selected dropdownlist item to a list, I made a code here but it is not appending if I putting default values works, but the 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>

javascript jquery c# asp.net asp.net-mvc

asked by anonymous 01.02.2018 / 01:42

2 answers

Continuous bounce jquery effect c: forEach does not work

score 1 · Answer 1

It does not make sense for you to have a $(document).ready() within the click event of the #addPeca button. I modified and transferred the manipulation logic of its <ul id="ListPeca"> to a method that is executed by clicking on the button, as well as loading the page, so it would already be mounted via JQuery with the options marked as selected in the View by @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><divclass="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>

Note: Just because of your code it's kind of difficult to understand your purpose, I leave a preview of the answer and after you have explained the expected behavior I edit.

score 1 · Answer 2

Resolved, I was putting wrong dropdowlist id so it is returning undefined, now that'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;
        });