Skip to main content
se añadieron 278 caracteres en el cuerpo; título editado
Origen Enlace
Dum
  • 521
  • 9
  • 30

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

Este es el json de prueba:.

tipoDepreciacion.json

Código 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).

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

Este el json de prueba:

Código 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 (debería omitirse).

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.

Este es el json de prueba.

tipoDepreciacion.json

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).

Se hizo el título mas especifico y mas objetiva la descripción del problema.
Origen Enlace
the-breaker
  • 5.5k
  • 4
  • 19
  • 39

¿Cómo puedo ocultar una opciónomitir opciones de miun select con javascript?

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

Lo que quiero es que al seleccionar una opción del select<select> se oculteomita en el siguiente select(no mostrar la opción del select anteriorpróximo, es decir que no se seleccionó)incluyan las opciones ya seleccionadas en los anteriores <select> en el nuevo selector que genere cuando yo de nuevamente clickse generé al botonhacer click en el botón agregar.

tipoDepreciacionPor 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.json

Este el json de prueba:

Código 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 mostrarseincluirse la opción seleccionada del primer select<select> en el segundo select(deberia ocultarsedebería omitirse).

¿Cómo puedo ocultar una opción de mi select con javascript?

Buenos días mi pregunta es la siguiente tengo un boton "agregar" que al dar click me adiciona un select y un input y lo que quiero es que al seleccionar una opción del select se oculte en el siguiente select(no mostrar la opción del select anterior que se seleccionó) que genere cuando yo de nuevamente click al boton agregar.

tipoDepreciacion.json

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 mostrarse la opción seleccionada del primer select en el segundo select(deberia ocultarse)

¿Cómo puedo omitir opciones de un select con javascript?

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 incluyan las opciones ya seleccionadas en los anteriores <select> en el nuevo selector que se generé al hacer click en el 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 el json de prueba:

Código 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 (debería omitirse).

Origen Enlace
Dum
  • 521
  • 9
  • 30

¿Cómo puedo ocultar una opción de mi select con javascript?

Buenos días mi pregunta es la siguiente tengo un boton "agregar" que al dar click me adiciona un select y un input y lo que quiero es que al seleccionar una opción del select se oculte en el siguiente select(no mostrar la opción del select anterior que se seleccionó) que genere cuando yo de nuevamente click al boton agregar.

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 mostrarse la opción seleccionada del primer select en el segundo select(deberia ocultarse)

introducir la descripción de la imagen aquí