Array, Dropdownliste, checkbox

[slevin]

Hello World

Kurz zu mir: Meine Erfahrung gleicht etwa der Begrüssungszeile. Jedoch ist noch kein Meister vom Himmel gefallen. Deshalb: attaque!

Ich möchte folgende Aufgabe lösen.
Um selbst noch ein wenig nachzudenken, versuche ich erst nur eine Teilaufgabe zu erklären um nicht eine fixfertige Lösung zu bekommen. Vielen dank schonmal im Vorraus für alle Antworten.

Die Aufgabe/Frage:

Ist es Möglich eine Dropdownliste aus einem Array zu füllen?

Beispiel:

Skriptcode:
var Link = new Array(3);
function getLink() {

var Link = new Array(4);
    Link[0]="Google";
    Link[1]="yahoo";
    Link[2]="20min";
    Link[3]="blick";

var URL = new Array(4);
    URL[0]="http://www.google.com";
    URL[1]="http://www.yahoo.com";
    URL[2]="http://www.20min.ch";
    URL[3]="http://www.blick.ch";

html code(im body):
<form action="select.htm">
    <select name="Links" size="3">
      <option onclick = "hier URL[0]">"hier möchte ich Link[0]"</option>
      <option onclick = "hier URL[1]">"hier möchte ich Link[1]"</option>
      <option onclick = "hier URL[2]">"hier möchte ich Link[2]"</option>
      <option onclick = "hier URL[3]">"hier möchte ich Link[3]"</option>
    </select>
</form>

D.h. ich möchte in der Dropdownliste z.B. auf google(Link[0]) klicken und anschliessend öffnet sich www.google.ch(URL[0]) im gleichen Fenster. Mir scheint so etwas sicherlich möglich zu sein, jedoch stellt sich die Frage: gibt es andere/bessere/leichtere Alternativen? Teilt mir doch eure Meinung mit.

Gruss janitor

[Der Martin]

Hallo,

Kurz zu mir: Meine Erfahrung gleicht etwa der Begrüssungszeile. Jedoch ist noch kein Meister vom Himmel gefallen.

eben, dabei könnte er sich auch ganz fürchterlich die Haxen brechen. :-)

Ist es Möglich eine Dropdownliste aus einem Array zu füllen?

Selbstverständlich. Du sagst es zwar nicht explizit, aber anhand des gewählten Themenbereichs und deines Codebeispiels gehe ich davon aus, dass du es in Javascript machen möchtest.[*]

Du musst zunächst das gewünschte select-Element im Dokument finden. Dazu hast du mehrere Möglichkeiten - du kannst ihm eine ID geben und das Element dann mit getElementById() suchen; du kannst andere getElement[s]ByX-Methoden verwenden; du kannst es auch über document.formularname.elementname ansprechen. SELFHTML gibt dir ein paar Anregungen.

Dieses select-Element bzw. sein zugehöriges Javascript-Objekt hat eine Eigenschaft options, das seine Kindelemente, nämlich die option-Elemente repräsentiert. Damit kannst du vorhandene options verändern oder auch neue hinzufügen.

D.h. ich möchte in der Dropdownliste z.B. auf google(Link[0]) klicken und anschliessend öffnet sich www.google.ch(URL[0]) im gleichen Fenster.

Dann brauchst du noch den onselect-Eventhandler (du hast onclick gewählt, das ist IMO auch okay). Dieser Eventhandler muss aus dem ausgewählte bzw. angeklickte option-Element die damit verknüpfte Ziel-URL auslesen, die du ja im value-Feld unterbringen willst, und sie der href-Eigenschaft des location-Objekts zuweisen. Damit löst du indirekt das Laden der gewünschten Ressource aus.

Mir scheint so etwas sicherlich möglich zu sein, jedoch stellt sich die Frage: gibt es andere/bessere/leichtere Alternativen? Teilt mir doch eure Meinung mit.

Das kommt drauf an, was du damit eigentlich erreichen willst. Eine Navigation auf diese Weise zu realisieren, halte ich zum Beispiel nicht für schlau - erstens weil sie untypisch ist (Gewohnheitsfaktor), zweitens weil sie ohne Javascript nicht mehr nutzbar ist.

Ciao,
 Martin

[*] Alternativ wäre es natürlich denkbar, das gewünschte HTML serverseitig (z.B. mit PHP) zu generieren.

[slevin]

Hallo:-)

..dass du es in Javascript machen möchtest..

ja genau

..Das kommt drauf an, was du damit eigentlich erreichen willst. Eine Navigation auf diese Weise zu realisieren, halte ich zum Beispiel nicht für schlau...

Eigentlich erübrigt sich mit der Antwort die ganze Aufgabe. Ich bräuchte eine Navigationsseite zu div. Link, je nach gewählter Checkbox kann man belibiege Links in der dropdownliste auswählen. Mit was für einem Ansatz würdest du es machen?

Die Idee von vorhin möchte ich jedoch nicht so schnell verwefen:

Du musst zunächst das gewünschte select-Element im Dokument finden. Dazu hast du mehrere Möglichkeiten - du kannst ihm eine ID geben und das Element dann mit getElementById() suchen; du kannst andere getElement[s]ByX-Methoden verwenden; du kannst es auch über document.formularname.elementname ansprechen. SELFHTML gibt dir ein paar Anregungen.

Dieses select-Element bzw. sein zugehöriges Javascript-Objekt hat eine Eigenschaft options, das seine Kindelemente, nämlich die option-Elemente repräsentiert. Damit kannst du vorhandene options verändern oder auch neue hinzufügen.

Dann brauchst du noch den onselect-Eventhandler (du hast onclick gewählt, das ist IMO auch okay). Dieser Eventhandler muss aus dem ausgewählte bzw. angeklickte option-Element die damit verknüpfte Ziel-URL auslesen, die du ja im value-Feld unterbringen willst, und sie der href-Eigenschaft des location-Objekts zuweisen. Damit löst du indirekt das Laden der gewünschten Ressource aus.

Kannst du mir dies in Codezeilen(Beispiel) schildern?

Mir ist nicht ganz klar wie ich die Arrays im html code adressieren/zugreifen muss/kann!?

Vielen Dank für deine Hilfe

Gruss

[Slevin]

Die offenen Punkte haben sich fast alle geklärt. Habe es jetzt so hinbekommen, wie du wohl gemeint hast:-) Die Unklarheiten(Adressierung, Zuweisung) habe ich auf einer anderen Seite gefunden. Vielen dank für deine Hilfe.

Jetzt werd ich wohl mit meinem Ansatz weitermachen, jedoch hätte ich deine Meinung zu der Frage noch gerne gehört.

Ich bräuchte eine Navigationsseite zu div. Link, je nach gewählter Checkbox kann man belibiege Links in der dropdownliste auswählen. Mit was für einem Ansatz würdest du es machen?

Gruss

[Der Martin]

n'Abend,

Ich bräuchte eine Navigationsseite zu div. Link, je nach gewählter Checkbox kann man belibiege Links in der dropdownliste auswählen. Mit was für einem Ansatz würdest du es machen?

ich würde die Links gruppenweise in ein ul-Element zusammenfassen, und dieses ul-Element abhängig davon, ob die zugehörige Checkbox aktiviert ist, sichtbar oder unsichtbar machen.

Ins Unreine gedacht:

~~~html <input type="checkbox" name="group1" />
  <ul>
   <li><a ... /></li>
   <li><a ... /></li>
   <li><a ... /></li>
  </ul>

  
~~~css
input:not(:checked) + ul  
 { display:none;  
 }

Die Negation mit der Pseudoklasse :not() scheint auf den ersten Blick unnötig kompliziert, könnte man doch ebensogut das ul-Element per Default ausblenden und nur über den Selektor input:checked + ul wieder einblenden. Dann würden aber ältere Browser, die die Pseudoklasse :checked nicht kennen, die Linkliste niemals anzeigen. Daher lieber den umgekehrten Fall als Fallback: Man nimmt in Kauf, dass diese Browser die Listen immer komplett anzeigen. So bleibt die Navigation wenigstens bedienbar.

Ciao,
 Martin