3

Buenos días mi pregunta es la siguiente, tengo un botón "agregar" que al dar click me adiciona un <select> y un <input>.

Lo que quiero es que al seleccionar una opción del <select> se omita en el próximo,es decir que no se incluya las opciones ya seleccionadas en los anteriores <select> en el nuevo selector que se generé al hacer click al botón agregar.

Por otra parte para cada <select> se agrega un botón que elimina toda la fila, de modo que la opción seleccionada de dicho <select> debería poder estar nuevamente disponible al eliminarse.

Este es el json de prueba.

tipoDepreciacion.json

[
    {
        "id_sub_catalogo":"1",
        "descripcion_breve":"AMORTIZACION DE SOFTWARE"
    },
    {
        "id_sub_catalogo":"2",
        "descripcion_breve":"DA DEPREC.DE EQUIPO DE COMPUTO"
    },
    {
        "id_sub_catalogo":"3",
        "descripcion_breve":"DEPREC.DE EQUIPO DE COMPUTO"
    },
    {
        "id_sub_catalogo":"4",
        "descripcion_breve":"DEPREC.DE EQUIPOS DIVERSOS"
    },
    {
        "id_sub_catalogo":"5",
        "descripcion_breve":"DEPREC.DE INFRAESTRUCTURA"
    },
    {
        "id_sub_catalogo":"6",
        "descripcion_breve":"DEPREC.DE MUEB.Y ENSERES"
    },
    {
        "id_sub_catalogo":"7",
        "descripcion_breve":"DA DEPRECIACION ASIGNADA"
    }
]

javascript

$(document).ready(function() {
            metodos.botonAgregar();
            metodos.botonEliminarInput();            
});

var metodos = function(){
            return {
                botonAgregar:function(){
                    $("#btnAgregar").click(function(){
                        metodos.cargaCombo();
                    });
                },
                botonEliminarInput:function(){
                    $("body").on("click",".delete",function(){
                        $(this).parent("div").remove();
                    });
                },
                cargaCombo:function(){
                    $.ajax({
                            url: 'tipoDepreciacion.json',
                            dataType: 'json',
                            type: 'GET',
                            success: function (json) {
                                var items = document.getElementById("items");
                                //items.innerHTML += "";
                                var select = `
                                        <div class="form-row dep_val" style="margin-bottom:3px;">
                                                <select class="idDepreciacion">
                                        `;
                                for (let valor of json) {
                                    select += "<option value='" + valor.id_sub_catalogo + "'>" + valor.descripcion_breve + "</option>";
                                }
                                var html = select + `</select> &nbsp;
                                                    <input class="form-control col-md-2 valor" type="number" required/>  &nbsp;     
                                                    <button class="btn btn-primary delete">-</button>
                                                    </div>`;
                                $("#items").append(html);

                            }
                    });
                }

            }
        }();

En la imagen siguiente no debería incluirse la opción seleccionada del primer <select> en el segundo <select>(debería omitirse).

introducir la descripción de la imagen aquí

2
  • En el evento onchage del primer select debes modificar el segundo select, ocultando esa opción. Supongo que cada opción se identifica por un dato igual en ambos select, sea el value, el id u otro. Ya tienes la idea, ahora inténtalo y dinos si lo lograste o tienes alguna dificultad.
    – A. Cedano
    Commented el 18 sept. 2019 a las 17:37
  • le agradecería saber como hacerlo ya que soy nuevo en jquery y javascript
    – Dum
    Commented el 18 sept. 2019 a las 17:44

1 respuesta 1

5

Para que funcione como quieres necesitas primero una variable donde guardes los indices ya seleccionados, luego ir agregando los indices a la variable para que no se tomen en cuenta el agregar un nuevo <select>.

Te sugiero que una vez seleccionado el valor de un <select> y se haga click en agregar, que dicho elemento se deshabilite para evitar el dilema de tener que modificar el próximo si se cambia el valor del actual (veo que no tienen name, solo class así que imagino que obtienes sus valores con jquery).

Luego debes controlar que no se puedan agregar mas de los necesarios (7).

Todo lo anterior lo haces modificando la función botonAgregar de esta forma:

botonAgregar:function(){
  $("#btnAgregar").click(function(){
    if(seleccionados.length<6){
      var valor = $('select:enabled').val()
      valor !=null ? seleccionados.push(valor) : null
      $('.idDepreciacion').prop('disabled', true);
      metodos.cargaCombo();
    }
  });
},

y agregando esta linea al recorrer el json para insertar los <option>

if(!seleccionados.includes(valor.id_sub_catalogo))

Luego respecto al la función eliminar, debes modificarla de la siguiente forma (ya que no los elementos no cuentan con id deben obtenerse con otros métodos):

$("body").on("click",".delete",function(){
  let padre = $(this).parent("div"); 
  let val=padre.children('select').val();
  seleccionados=seleccionados.filter(n => n!=val)
  padre.remove();  
  if($('select:enabled').val()!=null){
    var last = [...$('.dep_val')].pop();
    var valor = $(last).find('.valor').val();
    last.remove();
    $("#btnAgregar").click();
    var last = [...$('.dep_val')].pop()
    $(last).find('.valor').val(valor);
  }
  $("#btnAgregar").prop('disabled', false);
});

Ademas de que para conservar el valor del ultimo input numérico debes obtenerlo antes y pasarlo al nuevo input que se creará (eso lo hace el código dentro el ìf).

Por ultimo te recomiendo que el boton de agregar se deshabilite al llegar al máximo.

Aquí puedes ver una demostración de como funcionaria, luego puedes descomentar las lineas ajax:

var seleccionados=[];

$(document).ready(function() {
    metodos.botonAgregar();
    metodos.botonEliminarInput();            
});

var metodos = function(){
  return {
    botonAgregar:function(){
      $("#btnAgregar").click(function(){
        if(seleccionados.length<7){
          var valor = $('select:enabled').val()
          valor !=null ? seleccionados.push(valor) : null
          $('.idDepreciacion').prop('disabled', true);
          metodos.cargaCombo();
        }
        if(seleccionados.length==6)
          $("#btnAgregar").prop('disabled', true);
      });
    },
    botonEliminarInput:function(){
      $("body").on("click",".delete",function(){
        let padre = $(this).parent("div"); 
        let val=padre.children('select').val();
        seleccionados=seleccionados.filter(n => n!=val)
        padre.remove();  
        if($('select:enabled').val()!=null){
          var last = [...$('.dep_val')].pop();
          var valor = $(last).find('.valor').val();
          last.remove();
          $("#btnAgregar").click();
          var last = [...$('.dep_val')].pop()
          $(last).find('.valor').val(valor);
        }
        $("#btnAgregar").prop('disabled', false);
      });
    },
    cargaCombo:function(){
      /*$.ajax({
        url: 'tipoDepreciacion.json',
        dataType: 'json',
        type: 'GET',
        success: function (json) {*/
          json=JSON.parse('[{"id_sub_catalogo":"1","descripcion_breve":"AMORTIZACION DE SOFTWARE"},{"id_sub_catalogo":"2","descripcion_breve":"DA DEPREC.DE EQUIPO DE COMPUTO"},{"id_sub_catalogo":"3","descripcion_breve":"DEPREC.DE EQUIPO DE COMPUTO"},{"id_sub_catalogo":"4","descripcion_breve":"DEPREC.DE EQUIPOS DIVERSOS"},{"id_sub_catalogo":"5","descripcion_breve":"DEPREC.DE INFRAESTRUCTURA"},{"id_sub_catalogo":"6","descripcion_breve":"DEPREC.DE MUEB.Y ENSERES"},{"id_sub_catalogo":"7","descripcion_breve":"DA DEPRECIACION ASIGNADA"}]');
          var items = document.getElementById("items");

          var select = `
          <div class="form-row dep_val" style="margin-bottom:3px;">
          <select class="idDepreciacion">
          `;
          for (let valor of json) {
            if(!seleccionados.includes(valor.id_sub_catalogo))
            select += "<option value='" + valor.id_sub_catalogo + "'>" + valor.descripcion_breve + "</option>";
          }
          var html = select + `</select> &nbsp;
          <input class="form-control col-md-2 valor" type="number" required/>  &nbsp;     
          <button class="btn btn-primary delete">-</button>
          </div>`;
          $("#items").append(html);
        /*}
      });*/
    }
  }
}();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary" id="btnAgregar">Agregar</button>
<div id="items">
</div>

Y así el código funciona como esperas, saludos.

22
  • estimado muy buena su respuesta pero si yo elimino un campo debería seguir los componentes que no se han seleccionado y además de ello uso el ajax ya que esa data la traigo desde desde la base de datos y pasa a un controlador en .net
    – Dum
    Commented el 18 sept. 2019 a las 19:41
  • el archivo json solo lo creo como muestra de que datos esta llenando el select pero realmente los llamo desde el controlador en .net con conexión a base de datos
    – Dum
    Commented el 18 sept. 2019 a las 19:52
  • 1
    @Dum, Hola la respuesta que da the-breaker es una respuesta que contesta tu duda, y lo que preguntas en tu pregunta la cual es ¿Cómo puedo ocultar una opción de mi select con javascript? Commented el 18 sept. 2019 a las 20:48
  • 1
    @Dum el código es solo de ejemplo, puedes comentar la linea del json y descomentar las lineas de ajax y funcionará. Por otra parte puedo agregar la parte de eliminar los elementos y que vuelvan a ser seleccionables.. Commented el 18 sept. 2019 a las 21:49
  • 1
    Muchas gracias @the-breaker
    – Dum
    Commented el 19 sept. 2019 a las 4:04

Tu Respuesta

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

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