Dropdown Menus. You are here: irt.org | Articles | JavaScript | Form | Dropdown Menus [ previous next ] Published on: Thursday 22nd May 1997 By: Martin Webb Dropdown Menus Using HTML it is very easy to create a dropdown menu, for example: <form><select><option> Entry 0 <option> Entry 1 </select></form> There is currently no way that you can adjust the colour, height or font of form elements, but you can adjust the width by including extra spaces: <form><select><option> Entry 0 <option> Entry 1 </select></form> Scrolling List You can turn a selection list into a scrolling list by adding a size property to the SELECT tag:
Changing Select Content on the fly. Changing Select element content on the fly Changing a select element's content on the fly is a powerful feature of JavaScript that's just as practical.
It forms the basis of implementing inter-dependant select menus, where the selection of one menu changes the contents of another. In this tutorial, lets look at how this is done, and also, how to create a 2 level interdependent select list using the technique. Sounds like fun! The basic technique The basic technique for changing a select element's content using JavaScript is a two part process. <form name="myform"><select name="master" size="1"><option value="newsvalue">News</option><option value="webmastervalue">Webmaster</option><option value="techvalue">Tech</option></select></form> To change "master"s content using JavaScript, do the following: 1) Remove all options by setting the Options array's length to 0 document.myform.master.options.length=0 Doing the above instantly empties the select element, ready to be populated with new data.
Verkettete Auswahllisten. Rodney Rehm Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
Warum dieses Thema? Im modernen Webdesign wird immer mehr Wert auf Interaktivität gelegt. Um (statische) Webseiten zu dynamisieren, bietet sich die client-seitige Scriptsprache Javascript an. Für Browser, die diese Technologie unterstützen, lassen sich hilfreiche Erweiterungen programmieren. Im Beispiel-Code wurde auf moderne Arbeitsweise geachtet.
Option-Methoden) zum Einsatz, und es werden die Konzepte der objektorientierten Programmierung angewandt, welche für Javascript-Einsteiger vielleicht nicht sofort verständlich sind. Nach einem kurzen Beispiel wie das Endprodukt aussieht, werden die verwendeten Funktionen und Techniken erläutert. Das Format der Optionsdaten, Die Callback-Funktion und die Beispielimplementierung wichtig. Beispielimplementierung Anzeigebeispiel: So sieht's aus Erläuterung: Die wichtigsten Punkte der Einbindung im Überblick: Hilfsfunktionen Auslesen des Wertes der aktuell gewählten Option.