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>
<input class="form-control col-md-2 valor" type="number" required/>
<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
<select>
que tienes pensado agregar a tu pagina?checkbox
que al ser activados permitan el ingreso del valor asociado.