Ergebnis 1 bis 6 von 6
  1. #1
    eicon11 ist offline Grünschnabel
    registriert
    08-02-2010
    Beiträge
    5

    Mehrere DropDown-Liste dynamisch per ajax füllen und danach verändern

    Hi,

    erst mal die Aufgabe, ich habe auf meinem Server eine Datenstruktur in einem Baum.
    Ich möchte das die aktuelle Ebene des Baum in einer DropDown-Liste angezeigt wird.
    Code:
            A            B           C 
         |  |  |      |  |  |     |  |  |
         D  E  F      G  H  I     J  K  L
       | | |
       M N O
    usw.

    Also in der ersten DropDown-Liste sollen die Optionen A,B,C sein je nachdem was man auswählt kommt eine 2 DropDown-Liste mit den entsprechenden Blättern usw.
    Der Baum soll beliebig tief und auch beliebig breit sein können.

    Die Kommunikation zum Server steht schon und passiert per AJAX also man kann eine leere Anfrage an den Server Stellen und bekommt ein JSON Array mit der ersten Ebene zurück, wenn man dann A senden würde bekommt man D,E,F, wenn man dann AD sendet bekommt man MNO usw.

    Zusätzlich kommt noch hinzu dass wenn ich Jetzt A--D--M ausgewählt hätte und dann A zu B ändere soll sich die 3te DropDown-Box löschen und in der 2ten die Kinder von B also GHI zur Auswahl stehen.

    Mein Problem liegt hier vor allem im dynamischen, also dass ich nicht weiß wie tief der Baum ist und wie ich das dann aufbaue. Statisch habe ich es schon mehr oder weniger geschafft :-)

    HTML-Code:
    <div id="jel">
    <select id="t1" name="1st" onchange="javascript:test('JEL',this.options[this.selectedIndex].value,'t2')"></select>
    		
    <select id="t2" name="2st" onchange="javascript:test('JEL',$(#t1).this.options[$(#t1).selectedIndex].value +[this.selectedIndex].value,'t3')"></select>
    
    <select id="t3" name="3st" onchange="javascript:test('JEL',this.options[this.selectedIndex].value,'t4')"></select>
    </div>
    und JS
    PHP-Code:
    function test(classificationid ,next) {

        var 
    url oaBaseUrl "?name=" +classification +"&id=" +id;
        
    // perform ajax request
        
    $.ajax({
            
    dataType'json',
            
    urlurl,
            
    success: function(data){
                var 
    html = []
                
                
                
    // build the options
                
    $.each(data.children, function(i,item){
                    
    html.push('<option value="'+item.id+'">' +item.id item.description '</option>');
                });

                $(
    "#"+next).html(html.join(''));

            },
            
    error: function(reqstatuse) {
                
    alert("check open access: " status);
            }
        });

    Ich hoffe das ihr mir hier ein paar Tipps geben könnt.

    Grüße

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Mehrere DropDown-Liste dynamisch per ajax füllen und danach verändern

    Dein Ansatz ist an sich nicht schlecht - du musst nur einfach etwas modularer denken:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js"></script>
    <script type="text/javascript">
    var data = {
    	A: {
    		D: {},
    		E: {
    			M: {},
    			N: {},
    			O: {}
    		},
    		F: {}
    	},
    	B: {
    		G: {},
    		H: {},
    		I: {}
    	},
    	C: {
    		J: {},
    		K: {},
    		L: {}
    	}
    };
    
    function createSubSelect(parent, data){
    	if (!data) return;
    	
    	var options = [{tag: "option", value: "", text: "--- bitte auswählen ---"}];
    	for (var i in data){
    		options.push({tag: "option", value: i, text: i});
    	}
    	if (options.length == 1) return;
    	
    	var s = kkjs.node.create({
    		tag: "select",
    		data: data,
    		parent: parent,
    		child: null,
    		childNodes: options,
    		onchange: function(){
    			this.deleteChild();
    			createSubSelect(this, data[this.value]);
    		},
    		deleteChild: function(){
    			if (this.child){
    				if (this.child.deleteChild) this.child.deleteChild();
    				kkjs.node.remove(this.child);
    				this.child = null;
    			}
    		}
    	});
    	if (parent) parent.child = s;
    	kkjs.$("selectContainer").appendChild(s);
    }
    
    
    </script>
    <style type="text/css"></style>
    </head>
    <body onload="createSubSelect(null, data);">
    <div id="selectContainer"></div>
    </body>
    </html>
    - es sollte keinen großen Aufwand bedeuten, das in jQuery zu übersetzen und das AJAX mit einzubauen.

  3. #3
    eicon11 ist offline Grünschnabel
    registriert
    08-02-2010
    Beiträge
    5

    AW: Mehrere DropDown-Liste dynamisch per ajax füllen und danach verändern

    Hi,

    erst mal vielen Dank, das hat mir sehr weiter geholfen!

    Allerdings hänge ich gerade am löschen von den nicht mehr gebrauchten Listen.

    HTML-Code:
    function populate(classification) {
    
    	var url = oaBaseUrl + "?classificationName=" +classification;
    	// perform ajax request
    	$.ajax({
    		dataType: 'json',
    		url: url,
    		success: function(data) {
    			createSubSelect(null,data,classification,"");
    		},
    		error: function(req, status, e) {
    			alert("Can't make populate " + status);
    		}
    	});
    }
    
    function removeNode(node){
    	node.parentNode.removeChild(node);
    	return node;
    }
    
    function createOptionsTag(atts) {
    	var tag = atts.tag;
    	var value = atts.value;
    	var text = atts.text;
    	
    	var node = document.createElement(tag);
    	
    	node.value = value;
    	node.text = text;
    	
    	return node;
    }
    
    function createNode(atts) {
    	
    	var tag = atts.tag;
    	var parent = atts.parent;
    	var childNodes = atts.childNodes;
    
    	delete atts.tag;
    	delete atts.parent;
    	delete atts.childNodes;
    
    	var node = document.createElement(tag);
    	
    	for(var i = 0; i < childNodes.length; i++) {
    		node.appendChild(createOptionsTag(childNodes[i]));
    	}
    	
    	for (var i in atts){
    		try{
    			node[i] = atts[i];
    		}catch(e){
    			alert(e);
    		}
    	}
    	
    	if(parent)
    		parent.child = node;
    
    	return node;
    }
    
    
    function createSubSelect(parent, data, classification, parentID){
    	if (!data) return;
    	
    	var options = [{tag: "option", value: "", text: "--- bitte auswählen ---"}];
    	
    	$.each(data.children, function(i,item){
    		options.push({tag: "option", value: item.id, text: item.description});
    	});
    	
    	if (options.length == 1) return;
    	
    	var s = createNode({
    		tag: "select",
    		data: data,
    		parent: parent,
    		child: null,
    		childNodes: options,
    		parentID : parentID,
    		classification: classification,
    		onchange: function(){
    		this.deleteChild();
    		
    		var id = parentID +this.value;
    		var url = oaBaseUrl + "?classificationName=" +classification +"&id=" +id;
    		
    		$.ajax({
    			dataType: 'json',
    			url: url,
    			success: function(data) {
    			createSubSelect(this,data,classification,id);
    		},
    			error: function(req, status, e) {
    				alert("Can't make createSubSelect " + status +"cause of " +id);
    			}
    		});
    	},
    	deleteChild: function(){
    		if (this.child){
    			
    			if (this.child.deleteChild){
    				this.child.deleteChild();
    			}
    			
    			removeNode(this.child);
    			this.child = null;
    		}
    	}
    	});
    		
    	if (parent) { 
    		parent.child = s;
    	}
    	
    	$("#selectContainer").append(s);
    }
    mein Problem ist jetzt das bei deleteChild()

    also hier:
    HTML-Code:
    deleteChild: function(){
      if (this.child){
    			
        if (this.child.deleteChild){
          this.child.deleteChild();
        }
    
        removeNode(this.child);
        this.child = null;
      }
    }
    if(this.child) immer false liefert, obwohl ja weiter unten "parent.child = s" gesetzt wird.

    Wo mache ich da was falsch ?

    Grüße

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Mehrere DropDown-Liste dynamisch per ajax füllen und danach verändern

    Du erzeugst das neue <select> im success-Event des Ajax - dort ist this aber nicht das <select>, sondern wahrscheinlich das Request-Objekt (kenne mich mit jQuery nicht so aus). Deswegen übergibst du der Funktion das falsche Objekt als parent. Das kannst du umgehen, indem du anstatt this s übergibst.

  5. #5
    eicon11 ist offline Grünschnabel
    registriert
    08-02-2010
    Beiträge
    5

    AW: Mehrere DropDown-Liste dynamisch per ajax füllen und danach verändern

    Ah, ja ich verstehe, cool danke jetzt funktioniert alles so wie ich es will :-)

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Mehrere DropDown-Liste dynamisch per ajax füllen und danach verändern

    Bitte. Und es hat auch den Eindruck, dass du es verstanden hast.

Ähnliche Themen

  1. Div dynamisch füllen??
    Von Schnuckenpapa im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 06-08-2006, 20:20
  2. DropDown füllen bei Radiobutton
    Von prufer im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 11-05-2006, 07:54
  3. DropDown-Liste durchsuchen
    Von Lydia.h im Forum JavaScript
    Antworten: 33
    Letzter Beitrag: 26-09-2005, 12:08
  4. Dropdown mit Werten füllen
    Von draco2 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 06-04-2005, 12:25
  5. Dropdown dynamisch füllen
    Von ian_mcdeath im Forum JavaScript
    Antworten: 13
    Letzter Beitrag: 15-01-2004, 11:22

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •