1

el problema es :

  • Tengo un select multiple que lista registros de una tabla, entonces cuando selecciono una opcion del select me agrega un input con el ID del usuario dentro de un DIV, y cuando deselecciono una opcion sigue agregando uno nuevo input .

  • ¿Como puedo evitar que siga agregando cuando deselecciono una opcion y que me muestre los input segun la cantidad de opciones seleccionadas ?

$("#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>

1
  • Cuando mencionas que deseleccionas la opción a que te refieres, elijes otra opción con un valor nulo o que? el 21 abr. 2018 a las 18:33

1 respuesta 1

2

Con un evento change primero limpiamos el div contenedor, así evitamos la duplicidad datos, después recorreremos el select para ver que opciones se tienen seleccionadas y poder agregar solo lo que se desee. El código quedaría así:

$( "#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);

        });

    });

Espero te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.