Dynamische Abfrage auf eine Unterkategorie

[Florian123]

Hallo zusammen,

ich habe mir ein kleines Script geschrieben, dass eine dynamische Drop Down Liste erstellt (Kategorie), die wiederum eine weitere Liste erstellt (Unterkategorie).

Soweit so gut!

Nun möchte ich eine weitere Abfrage mit dynamischer Ausgabe erstellen.

Und zwar möchte ich gerne die Unterkategorie abfragen, ob es z.B. ein Zubehör, Drucker, etc. und entsprechend den Wert anzeigen lassen auf der Seite (Unterkategorie2).

Als Anlage habe ich den gesamten Quellcode eingefügt, ich hoffe, damit helfen zu können.

Mit freundlichen Gruß

Florian

/* "Array"

// *** Ende der globalen Variablen
function kategorie_anzeigen(f) {
   var kategorie = f.kategorien.selectedIndex;
   f.unterpunkte.options.length = urls[kategorie].length;
   for (var i=0; i<urls[kategorie].length; i++) {
      f.unterpunkte.options[i].text =
         (beschriftung[kategorie])[i];
   }
}
function seite_laden(f){
   var kategorie = f.kategorien.selectedIndex;
   var unterpunkt = f.unterpunkte.selectedIndex;
}
//--></script>
<select name="kategorien"
onchange="kategorie_anzeigen(this.form);">
   <option>Bitte auswählen</option>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>

<select name="unterpunkte"
onchange="seite_laden(this.form);">
   <option>Bitte auswählen</option>
</select>

/* weitere Auswahlliste mit dem Gerätenamen (Ausgabe)

 

[Sven Mintel]

Moin Florian,

statt der endlosen leeren Arrayelemente wäre es vileiicht besser, wenn du ein reduziertes Beispiel posten könntest, aber dafür mit sinnvollen Inhalten...so dass man zumindest erraten kann, was du mit "Unterkategorie" meinst.

 

[Florian123]

Hallo Sven,

ich habe nun den Quellcode gekürzt.

Also ich habe eine Hauptkategorie (Hersteller). Klicke ich nun einen Hersteller an, so erscheint eine weitere Liste mit einer Unterkategorie (Modell).

Nun möchte ich eine weitere Auswahlliste mit entsprechendem Gerätenamen (z.B. Drucker oder Zubehör etc.) dynamisch erstellt haben.

So soll man am Ende den Hersteller und das Modell auswählen UND der Gerätenamen wird automatisch/ dynamisch angezeigt werden.

Ich hoffe damit helfen zu können.

Gruß

Florian

 

[Sven Mintel]

Moin Florian,


Hier mal eine Funktion die soetwas macht(unabhängig davon, wie tief es in der Datenstruktur geht)

(
  function(ns,data,divId,css)
  {
    var _this={
                'wrapper':'span',
                'childclass':(typeof css=='undefined')?null:css,
                'ns':ns,
                'data':data,
                'root':document.getElementById(divId),
                'list':function(data)
                       { 
                         if(typeof data.childs!='undefined')
                         {
                           var list=document.createElement('select');
                               list.setAttribute('name',data.name);
                               list.setAttribute('id',data.name);
                                
                            for(var i=0;i<data.childs.length;++i)
                                {
                                  if(typeof data.childs[i]!='undefined')
                                  {
                                    var option=
                                      new Option(
                                                  data.childs[i].text,
                                                  (
                                                    (typeof data.childs[i].value
                                                      !='undefined')
                                                  ? data.childs[i].value
                                                  : data.childs[i].text
                                                  ),
                                                  !i
                                                          
                                                );
                                  
                                   if(
                                      this.childclass!=null
                                        &&
                                      typeof data.childs[i].data!='undefined'
                                        &&
                                      typeof data.childs[i].data.childs!='undefined'
                                        &&
                                      typeof data.childs[i].data.childs.length
                                      )
                                      {
                                        option.className=this.childclass;
                                      }
                                   list.options[list.options.length]=option;
                                   
                                  }
                                }
                            list.onchange=function()
                                              {
                                                window[ns].query(this);
                                              };
                            
                            var wrapper = document.createElement(this.wrapper);  
                            var label   = document.createElement('label');
                            if(typeof data.label!='undefined')
                            {
                              label.appendChild(document.createTextNode(data.label));
                            }
                            wrapper.appendChild(label);
                            wrapper.appendChild(list);             
                            return wrapper;
                            }
                            return document.createTextNode('empty list');
                            
                        },
                'clear':function(list)
                        {
                          if(list==null)
                          {
                            _this.root.parentNode
                                      .replaceChild(_this.root.cloneNode(false),
                                                    _this.root);
                            _this.root=document.getElementById(divId);

                          }
                          else
                          {
                            while(list.parentNode.nextSibling)
                            {
                              list.parentNode
                                  .parentNode
                                  .removeChild(list.parentNode.nextSibling);
                            }
                          }
                        },
                'query':function(obj)
                        { 
                            
                            var data=this.data;
                            this.clear(obj);
                            if(obj==null)
                            {
                              this.root.appendChild(this.list(data));
                            }
                            else
                            {
                              var lists=this.root.getElementsByTagName('SELECT');
                              for(var j=0;j<lists.length;++j)
                              {
                                var list=lists[j];
                                if(
                                    typeof data.childs=='undefined'
                                      ||
                                    typeof data.childs[list.selectedIndex]=='undefined'
                                      ||
                                    typeof data.childs[list.selectedIndex].data=='undefined'
                                  )
                                {
                                  return;
                                }
                                data=data.childs[list.selectedIndex].data;
                              }
                              this.root.appendChild(this.list(data));
                            }

                        }
              }
    window[ns]=_this;
    _this.query(null);
  }
)
(
  'fx',       //global eindeutiger Identifier
   data,      //Objekt mit Daten
  'divId',    //ID des Zielcontainers
  'hasChilds' //(optional)Klassenname für Optionen mit Kindlisten
)

Das einzige, was dort anzupassen ist, sind die 4 Parameter unten beim Aufruf:

1. "fx"
   das kann irgendein Objektname sein, den du in JS sonst global nicht verwendest
2. data
   ein Objekt mit den Daten...das was du vorher in dem Array hattest.
   Die Struktur ist etwas anders, später mehr dazu
3. "divId"
   die ID irgendeines Elementes
   dies Element muss zum Zeitpunkt des Aufrufes bereits eingelesen sein
   sein Inhalt wird beim Aufruf gelöscht
4. "hasChilds"
   irgendein CSS- Klassenname, über diesen kannst du optionen mit "Inhalt" formatieren, falls du willst.

Zu den Daten(im Beispiel ein Objekt namens "data")

Hier ein Beispiel:

var data={
          'name'  : 'liste1',
          'label' :'Liste#1',
          'childs': [
                      {
                        'text' :'Auswahl',
                        'value':-1
                      },
                      {
                        'text' :'_1',
                        'value':1
                      },
                      {
                        'text' :'_2',
                        'value':2
                      },
                      {
                        'text' :'_3',
                        'value':3,
                        'data' :{
                                  
                                  'name'  :'liste2',
                                  'label' :'Liste#2',
                                  'childs':[
                                              {
                                                'text' :'Auswahl',
                                                'value':-1
                                              },
                                              {
                                                'text' :'3_1',
                                                'value':1
                                              },
                                              {
                                                'text' :'3_2',
                                                'value':2,
                                                'data' :{
                                                        'name'  :'liste3',
                                                        'label' :'Liste#3',
                                                        'childs':[{
                                                                    'text' :'Auswahl',
                                                                    'value':-1
                                                                  },
                                                                  {
                                                                    'text' :'3_2_1',
                                                                    'value':-1
                                                                  },
                                                                  {
                                                                    'text' :'3_2_2',
                                                                    'value':1
                                                                  },
                                                                  {
                                                                    'text' :'3_2_3',
                                                                    'value':2
                                                                  }
                                                                 ]
                                                       }
                                              },
                                              {
                                                'text' :'3_3',
                                                'value':3
                                              }
                                           ]
                                }
                      },
                      {
                        'text' :'4',
                        'value':4
                      }
                    ]
         }

Die Bestandteile des Objektes:

• name
  das name-Attribut für die <select>
• label
  ein Label für die Liste(optional)
• childs(optional)
  das sind die <option>'s für die Liste

Diese childs haben weitere Bestandteile:

• text
  das, was in der <option> lesbar ist
• value(optional)
  value-Attribut der <option>
• data(optional)
  die nächste Dimension, das Spiel also wieder von vorn angefangen

Hier eine Demo:
http://doktormolle.de/temp/javascript_comboboxen_ohne_ajax.php

 

[Florian123]

Hallo,

erstmal vielen Dank für die schnelle Antwort.

Ich werde mir das Script ansehen und ggf. ab ändern und hoffen, dass es meinen Anforderungen passt.

Vielen Dank

Gruß

Florian