0

explico el caso tengo un boton "agregar" que adiciona (un select y un input) dinamicamente pero lo que yo quiero es que al seleccionar una opcion de mi primer select adicionado, al adicionar otro select ya no aparezca o deshabilite la opción seleccionada del primer select(anterior) y asi sucesivamente cuando siga agregando mas select dinamicamente.

html

<button class="btn btn-primary" id="btnAgregar">Agregar</button>
            <div id="items">
            </div>

mi archivo 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"
    }
]

script el select se llena desde un json.

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


                }
            });
        });
$("body").on("click",".delete",function(){
            $(this).parent("div").remove();
        });

el segundo select no deberia mostrar esa opción del primer select introducir la descripción de la imagen aquí

6
  • Hola, ¿cual es el máximo de <select> que tienes pensado agregar a tu pagina? Commented el 16 sept. 2019 a las 18:59
  • 7 es el máximo ya que esa cantidad es la que ha llenado los option
    – Dum
    Commented el 16 sept. 2019 a las 19:26
  • ya veo, el máximo es el total, creo que podrías optar por usar un select multiple en este caso, puedes ver como funciona en select2.org Commented el 16 sept. 2019 a las 19:30
  • 1
    entiendo, considero que otra opción podría ser emplear checkbox que al ser activados permitan el ingreso del valor asociado. Commented el 16 sept. 2019 a las 19:39
  • 2
    Posible duplicado de ¿Cómo puedo ocultar una opción de mi select con javascript?
    – Marcos
    Commented el 18 sept. 2019 a las 19:25

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.