document.addEventListener('DOMContentLoaded', function() { var gjere = document.getElementById('fusha_gjere'); var ngushte = document.getElementById('fusha_ngushte'); var detajuar = document.getElementById('fusha_detajuar'); var nenkategori = document.getElementById('nenkategorite'); if (!gjere || !ngushte || !detajuar || !nenkategori) return; var origNgushte = Array.from(ngushte.options); var origDetajuar = Array.from(detajuar.options); var origNenkategori = Array.from(nenkategori.options); // 1. Fusha e Gjerë ndryshon -> Filtro Fushën e Ngushtë gjere.addEventListener('change', function() { var val = this.value.trim(); ngushte.innerHTML = ''; ngushte.add(new Option('-- Zgjidh Fushën e Ngushtë --', '')); if (val) { origNgushte.forEach(function(opt) { if (opt.value && opt.value.startsWith(val)) { ngushte.add(opt.cloneNode(true)); } }); } ngushte.value = ''; ngushte.dispatchEvent(new Event('change')); }); // 2. Fusha e Ngushtë ndryshon -> Filtro Fushën e Detajuar ngushte.addEventListener('change', function() { var val = this.value.trim(); detajuar.innerHTML = ''; detajuar.add(new Option('-- Zgjidh Fushën e Detajuar --', '')); if (val) { origDetajuar.forEach(function(opt) { if (opt.value && opt.value.startsWith(val)) { detajuar.add(opt.cloneNode(true)); } }); } detajuar.value = ''; detajuar.dispatchEvent(new Event('change')); }); // 3. Fusha e Detajuar ndryshon -> Filtro Nënkategoritë detajuar.addEventListener('change', function() { var val = this.value.trim(); nenkategori.innerHTML = ''; nenkategori.add(new Option('-- Zgjidh Nënkategorinë --', '')); if (val) { origNenkategori.forEach(function(opt) { if (opt.value && opt.value.startsWith(val)) { nenkategori.add(opt.cloneNode(true)); } }); } nenkategori.value = ''; }); });