How to remove an element added by the append method according to the selected option of a select multiple?

Question

How to remove an element added by the append method according to the selected option of a select multiple?

Navigation

#1 by (2 votes)

1

the problem is:

I have a multiple select that lists records from a table, so when I select a select option it adds an input with the user ID inside a DIV, and when I deselect an option it continues adding a new input.
How can I prevent it from continuing to add when I deselect an option and show me the input according to the number of options selected?

$("#paginas").on('click', function() {
  var count = $(".opcion :selected option").length;
  var idUsuarios = $("#txtIdUsuarios").val();
  var add = "";

  add += '<input type="text" class="form-control" name="usuarios[]" value="' + idUsuarios + '">';
  $("#contiene").append(add);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="" id="modalAddPermiso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Asignación de Permisos por Paginas</h5>
        </div>
        <div class="modal-body">
          <form id="form_permiso" action="" method="POST">
            <div class="form-group">
              <label for="">Usuario</label>
              <input type="text" id="txtIdUsuarios" value="2">
              <input type="text" id="nomUsuario" name="nomUsuario" value="Juan Perez" class="form-control" disabled="">
            </div>
            <div class="form-group">
              <label for="">Rol </label>
              <input type="text" id="nombrerol" name="nombrerol" class="form-control" disabled="" value="Gerente">
            </div>
            <div class="form-group">
              <select name="paginas[]" id="paginas" class="form-control" multiple="multiple" style="height: 300px;">

                
                  <option class="opcion" value="1">Pagina1</option>
                
                  <option  class="opcion" value="2">Pagina2</option>
                
                  <option  class="opcion" value="3">Pagina3</option>
                
                  <option  class="opcion" value="4">Pagina4</option>
                
                  <option class="opcion" value="5">Pagina5</option>
                
                  <option class="opcion" value="6">Pagina6</option>
               

              </select>
            </div>
            <div id="contiene" class="col-md-12"></div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary pull-left" id="btnsavepermiso">Guardar</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

javascript jquery html5

asked by Luis 21.04.2018 в 19:25

source

1 answer

Change Javascript object image when an event occurs C ++ inventory system

score 2 · Accepted Answer

With an event change we first clean the div container, this way we avoid the duplication of data, then we will go through the select to see what options are selected and to be able to add only what is desired. The code would look like this:

$( "#paginas" ).change(function() {

        $("#contiene").empty();
        $( "#paginas option:selected" ).each(function() {
            var str = "";
            str += $( this ).val();
            add = '<input type="text" class="form-control" name="usuarios_'+str+'" value="' + idUsuarios + '">';
            $("#contiene").append(add);

        });

    });

I hope it serves you.