Fehler bei der dynamischen Änderung der Inhalte eines Select-Feldes

lachender_engel · 14.11.2013

Hallo, Zusammen.

Heute brauche ich bitte mal Eure Hilfe, da ich hier nicht weiter komme:
Ich muss in einer bestehenden (von mir nicht erstellten) Internetseite einen Fehler beheben. Wo der liegt ist klar, aber wie löse ich ihn?
Der Fehler beruht auf JavaSkript, und da bin ich nicht der Held. Vielleicht kann mir hier jemand einen Tipp oder sogar die Lösung geben?!

Also, ich habe zwei Selectfelder, untereinander die so aussehen:

HTML:

<div class="normal_select">
  <div id="uniform-Bezirk" class="selector">
    <span style="-moz-user-select: none;">Norden</span>
    <select id="Bezirk" onchange="changeOrt(this, orte_namen, orte_ids)" name="Bezirk" style="opacity: 0;">
      <option value="Norden">Norden</option>
      <option value="Nordosten">Nordosten</option>
      <option value="Süden">Süden</option>
    </select>
  </div>
</div>
<div class="normal_select">
  <div id="uniform-undefined" class="selector">
    <span style="-moz-user-select: none;">Hamburg</span>
    <select name="Ort" style="opacity: 0;">
      <option value="Hamburg">Hamburg</option>
      <option value="Kiel">Kiel</option>
      <option value="Bremen">Bremen</option>
    </select>
  </div>
</div>

Nun soll es so sein, dass bei der Änderung des ersten Select-Feldes, das zweite Select-Feld mit anderen Werten befüllt wird. Dazu gibt es dieses JavaSkript:

Code:

function changeOrt(object, namen, ids){
    var current_id = 0;
    if(object.value != "Norden"){
        if(object.value == "Nordosten"){
            current_id = 1;
        }else{
            current_id = 2;
        }
    }else{
        current_id = 0;
    }
    current_id += 1;
    var select_ort = object.parentNode.parentNode.parentNode.getElementsByTagName("select")[1];
    var i = 0;
    var t = 0;
    select_ort.options.length = 0;
    while(typeof ids[i] != "undefined"){
        if(ids[i] == current_id){
            select_ort.options[t] = new Option(namen[i], namen[i]);
            if(t == 0){
                select_ort.parentNode.getElementsByTagName("span")[0].innerHTML = namen[i];
            }
            t++;
        }
        i++;
    }
}

Was pssiert ist, dass sich bei der Auswahl der Bezirks auch die Optionen im Select-Feld "Bezirk" ändern. Ändern soll sich aber das Select-Feld "Ort".

Aus meiner Sicht und meinem Verständnis kann der Fehler nur im JavaSkript liegen, da dieses bei einem OnChange von "Bezirk" ausgeführt wird.

Kann mir da jemand einen Denkanstoß, Tipp oder sogar die Lösung geben?
Wäre klasse!

Vielen Dank!

Duddle · 14.11.2013

AW: Fehler bei der dynamischen Änderung der Inhalte eines Select-Feldes

Wie sehen orte_namen und orte_ids aus?

Duddle

lachender_engel · 14.11.2013

AW: Fehler bei der dynamischen Änderung der Inhalte eines Select-Feldes

Die sehen richtig aus. Die Inhalte, die ausgegeben werden, stimmen. Es wird lediglich das falsche Select-Feld aktualisiert.
Wenn ich also Select Bezirk ändere wird auch Select Bezirk mit neuen Werten gefüllt, statt Select Ort.
Ich verstehe mit dem JavaSkript nicht, wie die Zuordnung gemacht wird, welche Optionen von welche,m Select geändert werden.

Duddle · 14.11.2013

AW: Fehler bei der dynamischen Änderung der Inhalte eines Select-Feldes

Ich würde es gerne lokal nachvollziehen, aber ohne die genannten Variablen geht das nicht.

Duddle

lachender_engel · 14.11.2013

AW: Fehler bei der dynamischen Änderung der Inhalte eines Select-Feldes

Ah, ok. Dann ist es klar ;-)
Die beiden Variablen werden im Header-Bereich der Seite deklariert und sehen so aus:

Code:

var orte_namen = ["Hamburg","Kiel","Bremen","Berlin","Leipzig","Dresden","Rostock","Meissen","Wittenberg","München"]; 
var orte_ids = ["1","1","1","2","2","2","2","2","2","3"];

Hilft das?

Duddle · 14.11.2013

AW: Fehler bei der dynamischen Änderung der Inhalte eines Select-Feldes

Entweder habe ich die gewünschte Funktionalität falsch verstanden oder der Fehler liegt ausserhalb des Testfalles. Wenn ich im ersten <select> bspw. Nordosten auswähle, stehen dann im zweiten 6 Städte.

Mein Dokument:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	    select {
		opacity: 1 !important;
	    }
	</style>
    </head>
    <script type="text/javascript">
	var orte_namen = ["Hamburg","Kiel","Bremen","Berlin","Leipzig","Dresden","Rostock","Meissen","Wittenberg","München"]; 
	var orte_ids = ["1","1","1","2","2","2","2","2","2","3"];
	function changeOrt(object, namen, ids){
	    var current_id = 0;
	    if(object.value != "Norden"){
		if(object.value == "Nordosten"){
		    current_id = 1;
		}else{
		    current_id = 2;
		}
	    }else{
		current_id = 0;
	    }
	    current_id += 1;
	    var select_ort = object.parentNode.parentNode.parentNode.getElementsByTagName("select")[1];
	    var i = 0;
	    var t = 0;
	    select_ort.options.length = 0;
	    while(typeof ids[i] != "undefined"){
		if(ids[i] == current_id){
		    select_ort.options[t] = new Option(namen[i], namen[i]);
		    if(t == 0){
			select_ort.parentNode.getElementsByTagName("span")[0].innerHTML = namen[i];
		    }
		    t++;
		}
		i++;
	    }
	}
    </script>
    <body>
	<div class="normal_select">
	    <div id="uniform-Bezirk" class="selector">
		<span style="-moz-user-select: none;">Norden</span>
		<select id="Bezirk" onchange="changeOrt(this, orte_namen, orte_ids)" name="Bezirk" style="opacity: 0;">
		    <option value="Norden">Norden</option>
		    <option value="Nordosten">Nordosten</option>
		    <option value="Süden">Süden</option>
		</select>
	    </div>
	</div>
	<div class="normal_select">
	    <div id="uniform-undefined" class="selector">
		<span style="-moz-user-select: none;">Hamburg</span>
		<select name="Ort" style="opacity: 0;">
		    <option value="Hamburg">Hamburg</option>
		    <option value="Kiel">Kiel</option>
		    <option value="Bremen">Bremen</option>
		</select>
	    </div>
	</div>
    </body>
</html>

Bis auf das CSS habe ich nichts geändert.

Duddle