[PHP][JavaScript]Case'y w JS w zależności od wartości w bazie Opcje

[sadistic_son]

Cześć.

W JS raczkuję. Mam taki skrypcik poniżej:

[JAVASCRIPT] pobierz, plaintext 
const dvdFields = document.getElementById('dvdFields');
const bookFields = document.getElementById('bookFields');
const furnitureFields = document.getElementById('furnitureFields');
const selector = document.getElementById('productType');
 
 
selector.addEventListener("click", () => {
    selector.addEventListener("change", () => {
        switch (selector.value) {
            case "DVD":
                dvdFields.style.display = 'block';
                bookFields.style.display = 'none';
                furnitureFields.style.display = 'none';
                break;
            case "Book":
                bookFields.style.display = 'block';
                dvdFields.style.display = 'none';
                furnitureFields.style.display = 'none';
                break;
            case "Furniture":
                furnitureFields.style.display = 'block';
                dvdFields.style.display = 'none';
                bookFields.style.display = 'none';
                break;
            default:
                furnitureFields.style.display = 'none';
                dvdFields.style.display = 'none';
                bookFields.style.display = 'none';
 
        }
    });
});
[JAVASCRIPT] pobierz, plaintext 

Skrypt wyswietla lub chowa diy w zalezności od tego co mamy wybrane w SELECT. Żadne rocket science. Ale teraz wypadałoby aby wartości book, dvd, furniture nie były wpisane ręcznie, ale żeby ładowały się z bazy. Obecnie w bazie mam 3 rodzaje produktów, ale jak będzie ich 300... ?
Tak więc, jeśli rodzajów produktów będzie więcej to i case'ów powinno być automatycznie więcej. Jesli dodam do bazy rodzaj produktu 'sanki' no to powinien się dodać nowy case gdzie 'sankiFields' jest display:block a reszta ma 'none'.
Oczywiście wiem jak to zrobić w php, ale wrzucanie phpa do pliku js, lub trzymanie skryptu js w pliku *.php to chyba nie jest najlepsza praktyka. Pomóżcie jak to zrobić po bożemu.
Dzięki.

Ten post edytował sadistic_son 3.01.2023, 12:20:07

[sadistic_son]

Ok, zaraz polecę pętlą, ale tymczasem dlaczego nawet w obecnej formie, po zmianie selecta na dowolną wartość cały czas jedynie wyświetla element o ID takim jak pierwsza wartość z option?

[JAVASCRIPT] pobierz, plaintext 
let selector = document.getElementById('productType');
let visible = document.getElementById(selector.value);
let dynamicFields = document.getElementsByClassName('dynamicFields');
 
console.log(selector);
console.log(selector.value);
console.log(visible);
console.log(dynamicFields);
 
selector.addEventListener("change", () => {
    // dynamicFields.style.display = 'none';
    visible.style.display = 'block';
})
[JAVASCRIPT] pobierz, plaintext 

Tak jak by change zadziałał tylko jeden raz na początku.



EDIT:
oraz pętelka:

[JAVASCRIPT] pobierz, plaintext 
let selector = document.getElementById('productType');
let visible = document.getElementById(selector.value);
let dynamicFields = document.getElementsByClassName('dynamicFields');
 
console.log(selector);
console.log(selector.value);
console.log(visible);
console.log(dynamicFields);
 
selector.addEventListener("change", () => {
    for (var i = 0; i < dynamicFields.length; i++) {
        let c = dynamicFields[i];
        c.style.display = 'none';
 
    }
 
    visible.style.display = 'block';
})
[JAVASCRIPT] pobierz, plaintext 

Nic to niestety nie zmieniło (IMG:style_emoticons/default/sad.gif)

Ten post edytował sadistic_son 3.01.2023, 14:18:38