Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript Select liste verdoppeln

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    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.
    Stichworte: -
  • #2
    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?

    Kommentar

    • #3
      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

      Kommentar

      • #4
        ist gar nicht so kompliziert. musste mal bei selfhtml gucken.

        Kommentar

        • #5
          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

          Kommentar

          • #6
            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

            Kommentar

            • #7
              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?

              Kommentar

              • #8
                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ß..

                Kommentar

                • #9
                  Werds mal versuchen!
                  Danke dir.

                  Kommentar

                  Vorherige Weiter
                  Lädt...
                  X