Durchsuchen eines Arrays und Werte ausgeben

Laemmi · 5. Februar 2018

Hallo zusammen,

habe gerade ein kleines Problem, komme aber auf keine vernünftige Lösung, daher hoffe ich mal dass mir hier jemand helfen kann (und meine Frage nicht gar zu dämlich ist)

Ich erstelle aus einer Excel via VBA eine JS Datei (klingt umständlich, ist aber leider nicht anders möglich da ich auf den Geräten wo ich dies benötige nur über HTML / HTA Zugriff habe), in der ich diverse Daten speichere. In der HTA Datei lasse ich in einer Selectbox nun eine vereinfachte Auswahl durchführen, und möchte nun in einer weiteren Selectbox alle Daten anzeigen lassen die diesen Wert inne haben.

Die Datei in welcher die Daten durchsucht werden sollen ist so aufgebaut:

var data = {

Person1: {Name:'Bernd', Telefon: '00011', Relation:'100'},

Person2: {Name:'Klaus', Telefon: '00012', Relation:'101'},

Person3: {Name:'Dieter', Telefon: '00013', Relation:'102'},

Person4: {Name:'Frank', Telefon: '00014', Relation:'100'},

...

}

in der Selectbox sollte nun - wenn man z.B. Relation 100 auswählt - Bernd und Frank eingetragen werden, jeweils einzeln auswählbar.

Ich vermute mal dass ich den ersten Fehler beim Aufbau der data gemacht habe, das wäre aber nicht schlimm, wie gesagt erstelle ich diese via VBA, lässt sich also beliebig umschreiben.

ich hoffe es ist einigermaßen verständlich was ich suche, wenn nicht bitte Info.

Besten Dank schon einmal im Vorraus für die Hilfe.

Sempervivum · 5. Februar 2018

Zitat

lasse ich in einer Selectbox nun eine vereinfachte Auswahl durchführen ...

in der Selectbox sollte nun - wenn man z.B. Relation 100 auswählt

Zwei Fragen:

1. Ich nehme an, die erste Selectbox soll ebenfalls automatisch aufgebaut werden?

2. Soll die Auswahl in der ersten Selectbox nur die Felder 'Relation' enthalten?

Laemmi · 5. Februar 2018

Die erste Selectbox ist automatisch befüllt, ebenfalls via VBA, und das funktioniert soweit.

Hierfür ist eine andere .js Datei welche wirklich nur die Relationen erhält:

document.listForm.relation.options[document.listForm.relation.length] = new Option('100');

document.listForm.relation.options[document.listForm.relation.length] = new Option('101');

document.listForm.relation.options[document.listForm.relation.length] = new Option('102');

...

also ja, nur die Felder 'Relation'.

Sempervivum · 5. Februar 2018

Ich habe mal einen Vorschlag ohne jQuery ausgearbeitet:

Code

<form name="listForm">
        <select name="relation">
        </select>
        <select name="data">
        </select>
    </form>
    <script>
        var data = {
            '100': [
                {Name:'Bernd', Telefon: '00011'},
                {Name:'Frank', Telefon: '00014'}
            ],
            101: [
                {Name:'Klaus', Telefon: '00012'}
            ],
            102: [
                {Name:'Dieter', Telefon: '00013'}
            ]
        };
        document.listForm.relation.options[document.listForm.relation.length] = new Option('100');
        document.listForm.relation.options[document.listForm.relation.length] = new Option('101');
        document.listForm.relation.options[document.listForm.relation.length] = new Option('102');
        var relselect = document.listForm.relation;
        relselect.addEventListener("change", function() {
           var dataselect = document.listForm.data;
           dataselect.innerHTML = '';
           data[this.options[this.selectedIndex].innerHTML].forEach(function (item, idx) {
               var opt = new Option(item.Name);
               opt.setAttribute("data-telefon", item.Telefon);
               dataselect.appendChild(opt);
           });
        });
        var e = document.createEvent('HTMLEvents');
        e.initEvent("change", false, true);
        relselect.dispatchEvent(e);
    </script>

Alles anzeigen

Prüfe, ob es das ist, was Du brauchst. Die Definition der Daten habe ich so geändert, dass der Zugriff möglichst einfach ist.

Laemmi · 5. Februar 2018

Besten Dank schon einmal, leider unterstützt HTA anscheinend weder den addEventListener - was nicht das Problem ist - noch forEach, zumindest bekomme ich eine Fehlermeldung. Starte ich es in HTML funktioniert es einwandfrei, in HTA nicht.

HTML ist leider keine Option, da ich auf das Dateisystem zugreifen und dort auch Änderungen vornehmen muss, daher HTA, was aber - je weiter ich mich damit beschäftige - immer mehr offenbart was es doch alles eigentlich nicht kann...

Sempervivum · 5. Februar 2018

Dann versuchen wir es mit onchange und einer for-Schleife:

Code

        relselect.onchange = function() {
           var dataselect = document.listForm.data;
           dataselect.innerHTML = '';
           var cdata = data[this.options[this.selectedIndex].innerHTML]
           for (var i = 0; i < cdata.length; i++) {
               var item = cdata[i];
               var opt = new Option(item.Name);
               opt.setAttribute("data-telefon", item.Telefon);
               dataselect.appendChild(opt);
           };
        };

Alles anzeigen

Laemmi · 5. Februar 2018

das sieht gut aus.

Werde jetzt mal meine Daten anpasssen und dann nochmal genau testen, aber prinzipiell macht es das was es soll, denke also das ist es.

Besten Dank Sempervivum!

Durchsuchen eines Arrays und Werte ausgeben

Jetzt mitmachen!

Teilen