leere option-tags in dynamisch erzeugtem select-feld

[erlprinz]

Hallo jswelt-community.

ich sitze gerade an einem dynamisch befüllten formular, das soweit eigentlich auch schon ganz gut funktioniert.

es gibt zwei Auswahlfelder, je nach Auswahl im ersten Feld wird dann das zweite angezeigt oder eben nicht. Wenn das zweite Feld angezeigt wird, gibt es da auch noch verschiedene Optionen. Der js-code der ausgworfen wird (wird per php dynamisch gechrieben) scheint soweit korrekt, trotzdem jedoch wird erscheinen massenhaft leere option-tags

<option></option>

zusätzlich. Das soll natürlich nicht so sein? Kennt jemand das Problem? und vor allem: wie werde ich es los?

hier der ganze generierte code:

                      <script type="text/javascript">



                          $(function() {



                            var val = document.getElementById('page_type');
                                        $("div#parent").css("display", "none");
                                });


                                function showFields(obj) { try {
                                        var val = $("#page_type").val();


                                        if(val == "2") {
                                                $("div#parent").fadeIn("slow").css("display", "block");

                                        }else if (val == "4") {
                                                $("div#parent").fadeIn("slow").css("display", "block");

                                        }else if (val == "6") {
                                                $("div#parent").fadeIn("slow").css("display", "block");

                                        }else if (val == "1") {
                                                $("div#parent").fadeIn("slow").css("display", "block");

                                        }else if (val == "") {
                                                $("div#parent").fadeIn("slow").css("display", "block");

                                        }else {
                                                $("div#parent").css("display", "none");

                                        }} catch(e) { alert(e); }

                                        var chosenType = document.forms.html_data.page_type;
                                        var possibleParents = document.forms.html_data.page_menu_parent;
                                        possibleParents.options.length = 0; // DropDown Menue entleeren
                                        if
                                                 (val == "2")
                                                    {
                                                            possibleParents.options[1] = new Option("Home");
                                                            possibleParents.options[22] = new Option("Alte Seite");
                                                            possibleParents.options[263] = new Option("asdfasdfdf");
                                                            possibleParents.options[266] = new Option("neue unterseite");
                                                    }                                                               
                                                else if
                                                 (val == "4")
                                                    {
                                                            possibleParents.options[1] = new Option("Home");
                                                            possibleParents.options[22] = new Option("Alte Seite");
                                                            possibleParents.options[263] = new Option("asdfasdfdf");
                                                            possibleParents.options[266] = new Option("neue unterseite");
                                                    }                                                               
                                                else if
                                                 (val == "6")
                                                    {
                                                            possibleParents.options[1] = new Option("Home");
                                                            possibleParents.options[22] = new Option("Alte Seite");
                                                    }                                                               
                                                else if
                                                 (val == "1")
                                                    {
                                                    }                                                               
                                                
                                        }

                        </script>

[erlprinz]

a

[kkapsner]

Könnte an den seltsamen Indizes der options liegen. Gib denen hald fortlaufende Nummern und beginne bei 0.

[erlprinz]

mit indizes meinst du jetzt den jeweilen value, oder? das geht dann leider nicht, weil diese werte aus der db kommen und woanders zur verknüpfung benötigt werden.

[kkapsner]

Nein, ich meine nicht den Wert der <option>, sondern dessen index im .options-"Array". (Den Wert belegst du gar nicht explizit...)

[Castell]

Wie schon kkapsner sagte,

es liegt an den Indizes, heißt an den Zahlen in den eckigen Klammern von .options[xxx].
Denn die Indizes bestimmen, an welche Stelle das Option Tag hinzugefügt wird.
Belegst du nun options[0] und options[10] mit einem Wert,
dann werden automatisch alle dazwischenliegenden options als leere tags erzeugt.

Da gibt es leider keinen Weg vorbei, du musst die Indizes von 0 an fortlaufen lassen.

gruß,
Castell

[erlprinz]

gibt es einen weg, leere option-tags wieder rauszufiltern?

[kkapsner]

Schon - aber warum willst du die Leeren überhaupt erzeugen? Denn wenn du die Leeren löschst ändert sich auch der Index der nicht leeren.

[erlprinz]

ich will die leeren nicht erzeugen, aber ich brauche die values mit den richtigen zahlen, und nicht mit den zahlen in der reihenfolge von 0 beginnend einfacdeshalb poste ich hier ja.

oder gibt es einen weg, die values extra zu setzen? jedenfalls sollen halt wirklich nur die zeilen rauskommen, die ich brauche. mit den richtigen values

[miniA4kuser]

 possibleParents.options[1] = new Option("Home");
possibleParents.options[22] = new Option("Alte Seite");
possibleParents.options[263] = new Option("asdfasdfdf");
possibleParents.options[266] = new Option("neue unterseite");

Das ergibt 267 options (0 bis 266) von denen du nur 4 benötigst (1, 22, 263, 266), heißt im Umkehrschluß du generierst 263 leere options (267 - 4). Hier liegt also dein Denkfehler. Du generierst deine options falsch.

[kkapsner]

Noch einmal: Der Wert der <option>s hat gar nichts mit dem Index im .options-"Array" zu tun:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript">
window.onload = function(){
	var sel = document.getElementById("sel");
	sel.options[3] = new Option("test");
	for (var i = 0; i < sel.options.length; i++){
		alert(i + ": " + sel.options[i].value);
	}
	sel.options[4] = new Option("test2", "hallo");
	alert("4: " + sel.options[4].value);
}
</script>
<style type="text/css"></style>
</head>
<body>
<select id="sel">
</select>
</body>
</html>

[erlprinz]

okay. danke. das wars, hat geholfen. also alles was ich machen mußte, war in die klammer zur erzeugung der neuen option auch den wert hineinzuschreiben, an zweiter position. Danke : )

[kkapsner]

Bitte - aber du solltest dich dringend mit den Grundlagen von JS beschäftigen...

[erlprinz]

kannst du mir da einen guten weg empfehlen, das anzugehen? habe bisher noch nicht so ein tolles verzeichnis gefunden wie zb für php, wo man alles nachschlagen kann (manual auf php.net).

[kkapsner]

http://de.selfhtml.org/ ist recht gut für den Einstieg. Ansonsten kann man immer bei MSDN und MDC nachschlagen.