Javascript Select liste verdoppeln

dsmcg · 18.10.2006, 18:32

hallo zusammen!
habe ein kleines JavaScript Problem.

zuerst einmal aber die Ausgangslage:

PHP-Code:

  <form name="form">

<select name="liste" size="1" tabindex="2">

<option name="option" value="1">Option1</option>

<option name="option" value="2">Option2</option>

<option name="option" value="3">Option3</option>

</select>

</form>

So sieht meine Select liste aus.

Nun möchte ich dass wenn man irgend eine option auswählt, unterhalb einfach wieder die genau gleiche select liste angezeigt wird, und wenn man bei der zweiten etwas auswählt wieder unterhalb die gleiche selectliste angezeigt wird usw.

Nur noch etwas muss bei den folgenden selectlisten anders sein, und zwar muss es einen Radio Button geben, und wenn man diesen auswählt wird die select liste wieder gelöscht.

ich hoffe ich habe mich verständlich ausgedruckt und jemand kann mir helfen.

nikosch · 18.10.2006, 21:03

wen willst du denn ärgern

?
geht da nicht was mit innerhtml und document.write oder so, wenn du das select in nen div container packst? und verschiedene Namen mußt du denen dann wohl auch noch zuweisen, per JS den name Parameter ändern?

dsmcg · 18.10.2006, 22:05

Zitat:

Zitat von nikosch77

wen willst du denn ärgern

?
geht da nicht was mit innerhtml und document.write oder so, wenn du das select in nen div container packst? und verschiedene Namen mußt du denen dann wohl auch noch zuweisen, per JS den name Parameter ändern?

Hmm da stoss ich mit meinem JavaScript Kennen am Ende... mal schauen ob mir sonst jemand helfen kann. danke trotzdem

nikosch · 18.10.2006, 23:06

ist gar nicht so kompliziert. musste mal bei selfhtml gucken.

Zergling-new · 18.10.2006, 23:28

Wenn du das ganze in einen div-Kontainer packst, kannst du das per JS ganz einfach auslesen (document.getElementById('divKontainer').innerHTML [1]) und dementsprechend auch wieder in einen neuen Kontainer reinhaun. Allerdings hast du dann das Problem der doppelten Namen für die <select>-Boxen.

Kannst das ganze auch per DOM dran hängen, ist vielleicht etwas edler, aber andererseits auch etwas mühseliger:
http://de.selfhtml.org/javascript/objekte/node.htm
DOM eben

[1] http://de.selfhtml.org/javascript/ob...htm#inner_html

nikosch · 19.10.2006, 00:10

und mit
document.getElementById('Selection').setAttribute ("name", "derName", "false");
müßte theoretisch dann der Name geändert werden können. Wenn Du ne überschaubare Anzahl von Auswahlen brauchst kannst Du die auch von vornherein in div Boxen anlegen und alle außer der ersten zunächst mit CSS (display:none) unsichtbar schalten. JavaScrips onChange setzt dann das über getElementById die style.display Eigenschaft neu. Mußt Du wissen wie flexibel Du's brauchst

dsmcg · 19.10.2006, 10:05

An display:none hatte ich gar nicht dran gedacht! danke dir nikosch77.
Natürlich auch danke an Zergling! mal schauen was ich machen kann.

@nikosch77 hast du vileicht nen Link wo das ganze ein bischen genauer beschrieben wird?

nikosch · 19.10.2006, 15:37

Hab keinen konkreten Link, deswegen hier mal ein kleines Bsp:

Code:

<html><head>
<style type="text/css">

.weg {display:none;}
.da  {display:block;}

</style>
<script language="JavaScript">

  function show(G) {
    document.getElementById(G).className='da';
    document.getElementById(G).getElementsByTagName('input')[0].checked=true; 
    document.getElementById(G).getElementsByTagName('select')[0].selectedIndex=0; }

  function hide(G) {
    document.getElementById(G).className='weg'; }

</script>
</head><body>

<input type="checkbox" disabled="disabled">
<select onchange="show('2nd')"><option selected>auswahl1<option>option</select>

<div id="2nd" class="weg">
  <input type="checkbox" onmousedown="if (this.checked==true) hide('2nd');">
  <select onchange="show('3rd')"><option selected>auswahl2<option>option</select></select>
</div>

<div id="3rd" class="weg">
  <input type="checkbox" onmousedown="if (this.checked==true) hide('3rd');">
  <select><option selected>auswahl3<option>option</select></select>
</div>

</body></html>

- Browserkompatibilität ungetestet
- Form, name der Selects etc. fehlen...
Du kannst natürlich das Onchange-Ereignis noch davon abhängig machen, was ausgewählt wird und so z.B. auch wieder das nachfolgende Select schließen. Vielleicht auch lieber in ein OnMouseUp Ereignis ändern. Ist ja nur ne Arbeitsidee.
Viel Spaß..

dsmcg · 19.10.2006, 16:56

Werds mal versuchen!
Danke dir.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
SELECT Komponente per JavaScript ansprechen	Plague	HTML, Usability und Barrierefreiheit	5	28.06.2008 18:39
[Erledigt] Kein Ergebnis bei SELECT (MySQL 4.1.9)	dr.e.	Datenbanken	4	15.06.2008 19:54
[Erledigt] Mysql Insert Select + Concat	Hu5eL	Datenbanken	14	10.06.2008 10:39
SELECT AS geht bei AVG net	cyberholic	Datenbanken	0	04.05.2006 09:43
[JavaScript] Event Handler in form select - Syntax?	winfo_cologne	HTML, Usability und Barrierefreiheit	5	29.03.2006 16:47
SELECT Liste aus MySQL verarbeiten	jensK	PHP Tipps 2006	9	09.02.2006 16:08
selbst gelöst! Select <option> kleines Problem Dropdow	24bits	PHP Tipps 2005-2	0	15.10.2005 19:19
Dropdown-Menü nach klick in Liste füllen		PHP Tipps 2005-2	0	13.06.2005 09:33
[Erledigt] SELECT in SELECT		PHP Tipps 2005	5	06.04.2005 22:30
[Erledigt] Liste in Textarea einfügen		HTML, Usability und Barrierefreiheit	0	03.01.2005 19:16
[Erledigt] 2 mal select 1 form		PHP-Fortgeschrittene	1	01.09.2004 20:13
Javascript		HTML, Usability und Barrierefreiheit	5	31.08.2004 18:30
selektierter wert in select box anzeigen		PHP Tipps 2004	6	30.08.2004 13:49
php + Javascript, Variablenübergabe		PHP Tipps 2004	14	28.07.2004 15:42

18.10.2006, 18:32
dsmcg Erfahrener Benutzer Registriert seit: 11.10.2005 Beiträge: 2.405	Javascript Select liste verdoppeln hallo zusammen! habe ein kleines JavaScript Problem. zuerst einmal aber die Ausgangslage: PHP-Code: `<form name="form"> <select name="liste" size="1" tabindex="2"> <option name="option" value="1">Option1</option> <option name="option" value="2">Option2</option> <option name="option" value="3">Option3</option> </select> </form>` So sieht meine Select liste aus. Nun möchte ich dass wenn man irgend eine option auswählt, unterhalb einfach wieder die genau gleiche select liste angezeigt wird, und wenn man bei der zweiten etwas auswählt wieder unterhalb die gleiche selectliste angezeigt wird usw. Nur noch etwas muss bei den folgenden selectlisten anders sein, und zwar muss es einen Radio Button geben, und wenn man diesen auswählt wird die select liste wieder gelöscht. ich hoffe ich habe mich verständlich ausgedruckt und jemand kann mir helfen. __________________ Wie man Fragen richtig stellt


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

18.10.2006, 21:03
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	wen willst du denn ärgern ? geht da nicht was mit innerhtml und document.write oder so, wenn du das select in nen div container packst? und verschiedene Namen mußt du denen dann wohl auch noch zuweisen, per JS den name Parameter ändern?

18.10.2006, 23:06
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	ist gar nicht so kompliziert. musste mal bei selfhtml gucken.

18.10.2006, 23:28
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Wenn du das ganze in einen div-Kontainer packst, kannst du das per JS ganz einfach auslesen (document.getElementById('divKontainer').innerHTML [1]) und dementsprechend auch wieder in einen neuen Kontainer reinhaun. Allerdings hast du dann das Problem der doppelten Namen für die <select>-Boxen. Kannst das ganze auch per DOM dran hängen, ist vielleicht etwas edler, aber andererseits auch etwas mühseliger: http://de.selfhtml.org/javascript/objekte/node.htm DOM eben [1] http://de.selfhtml.org/javascript/ob...htm#inner_html

19.10.2006, 00:10
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	und mit document.getElementById('Selection').setAttribute ("name", "derName", "false"); müßte theoretisch dann der Name geändert werden können. Wenn Du ne überschaubare Anzahl von Auswahlen brauchst kannst Du die auch von vornherein in div Boxen anlegen und alle außer der ersten zunächst mit CSS (display:none) unsichtbar schalten. JavaScrips onChange setzt dann das über getElementById die style.display Eigenschaft neu. Mußt Du wissen wie flexibel Du's brauchst

19.10.2006, 10:05
dsmcg Erfahrener Benutzer Registriert seit: 11.10.2005 Beiträge: 2.405	An display:none hatte ich gar nicht dran gedacht! danke dir nikosch77. Natürlich auch danke an Zergling! mal schauen was ich machen kann. @nikosch77 hast du vileicht nen Link wo das ganze ein bischen genauer beschrieben wird? __________________ Wie man Fragen richtig stellt

19.10.2006, 16:56
dsmcg Erfahrener Benutzer Registriert seit: 11.10.2005 Beiträge: 2.405	Werds mal versuchen! Danke dir. __________________ Wie man Fragen richtig stellt