Spezielle Multiple Select Box

Hallo,
ich habe ein Problem mit einer Multiple Select Box und alles versucht ohne Ergebnis.... hoffe hier kann mir jemand weiterhelfen

Folgendes:
ich will ein input feld haben in welches nicht geschrieben werden kann, also readonly ist.
Bei klick auf dieses Feld soll eine Multiple Select Box unter dem Feld eingeblendet werden und die dortigen Einträge sollen wenn man sie anwählt in das readonly input feld geschrieben werden mit z.B. ; getrennt

Ich bin verzweifelt...

Please also mark the comments that contributed to the solution of the article

Content-Key: 100112

Url: https://administrator.de/contentid/100112

Printed on: April 27, 2024 at 03:04 o'clock

6 Comments

Latest comment

Aha, hm, hm, ähhm...

*tippel tippel*

<html>
  <head>
    <title>Simplex</title>
    <style type="text/css">  
      <!--
        .mjc fieldset        { border:1px solid #c0c0c0; }
        .mjc fieldset input  { width:250px; }
        .mjc fieldset select { display:none; }
      -->
    </style>
    <script type="text/javascript">  
      <!--
        function copy(MC,TARGET_ID){
            var TARGET = document.getElementById(TARGET_ID);
            var values = new Array();
            for(x=0;x<MC.length;x++)
                  if(MC.options[x].selected === true)
                       values.push(MC.options[x].value);
            TARGET.value = values.join(';'); 
        }
        
        function toggleID(ID){
            var TARGET = document.getElementById(ID);
            if(TARGET.style.display != 'block') 
                  TARGET.style.display = 'block'; 
            else
                  TARGET.style.display = 'none'; 
        }
      -->
    </script>
  </head>
  <body>
  
    <form class="mjc">  
      <fieldset>
        <legend>Multiple-Javascript-Choice</legend>
        <input type="text" id="target" value="" readonly onclick="toggleID('choice')"><br>  
        <select size="6" id="choice" multiple onchange="copy(this,'target')">  
          <option>asdasd 1</option>
          <option>asdasd 2</option>
          <option>asdasd 3</option>
          <option>asdasd 4</option>
          <option>asdasd 5</option>
          <option>asdasd 6</option>
        </select>
      </fieldset>
    </form>
  
  </body>
</html>

So oder ?

Gruß Arano

Herzlichen Dank, genau das ist es jetzt trau ich mich schon fast nicht mehr zu fragen aber gibt es noch eine möglichkeit die multiple select box so umzustricken das man nicht mit der STRG taste arbeiten muss sondern die möglichkeit hat bei jedem eintrag über eine checkbox den wert zu selektieren?

Hm... denkst du da an eine Selectbox die für jeden Eintrag einzeln noch extra eine Checkbox bereit stellt ?

Wozu dann die Selectbox ?

Dan würde eine einfache Liste mit Checkboxen doch ausreichen... oder nicht ?

Ein schönes Wochenende
~Arano

Habe mal eine optimierung der multiple select box gesehen wo zu einfachen selection ohne STRG taste eine checkbox hinzugefügt wurde, wichtig ist mir das ich letztlich eine dropdownliste mit den entsprchenden werten habe und mehrere werte alleine mit der maus selectieren kann (ohne funktionstate wie STRG) und in dem obrigen feld wie von dir super umgesetzt die werte mit ; getrennt aufgelistet bekomme.
Leider ist JavaScript eine Sprache die ich verflucht habe, habe mehrfach versucht mich reinzufuchsen aber ging jedes mal leider nach hinten los weil immer irgendwas dazwischen gekommen ist nur wenn man es wirklich braucht ist die situation unschön

Also mit einer Dropdownliste geht das nicht, da kann man nur eine Option markieren ;)

Nun denn, habe mich gerade noch mal rangesetzt und meinen ersten Gedenken den ich zu deinem vorherigem Beitag hatte niedergeschrieben:

<html>
  <head>
    <title>Simplex</title>
    <style type="text/css">  
      <!--
        .mjocc fieldset        { border:1px solid #c0c0c0; }
        .mjocc fieldset input  { width:250px; }
        .mjocc fieldset select { display:none; }
      -->
    </style>
    <script type="text/javascript">  
      <!--
        function toggleID(ID){
            var TARGET = document.getElementById(ID);
            if(TARGET.style.display != 'block')  
                  TARGET.style.display = 'block';  
            else
                  TARGET.style.display = 'none';  
        }
        
        // in diesem Array werden die schon getaetigten markierungen gespeichert
        var choices = new Array();
        function copy(MC,TARGET_ID){
            // MC        = objectreferenz auf die selectbox(MultipleCoice)
            // TARGET_ID = die ID des inputfields in dem die liste angezeigt werden soll
            // erstelle eine objectrefferenz zu dem inputfield und speichere sie in TARGET
            var TARGET = document.getElementById(TARGET_ID);
            
            // eine schleife die jede option der selectbox abarbeitet
            for(x=0;x<MC.length;x++)
                  // wenn die aktuelle option markiert wurde...
                  if(MC.options[x].selected === true)
                        // ...fuege sie dem array choices hinzu.
                        // wenn die position in dem array choices schon belegt ist, ...
                        if(choices[x] != null)
                              // ... hebe markierung auf und speichere statt dessen NULL
                              choices[x] = null;
                        // andernfalls speichere den wert in dem array
                        else  choices[x] = MC.options[x].value;
            
            // in diesem array werden nur die markierten werte aus dem array<choices gespeichert (ohne leere zwischenpositionen)
            var output = new Array();
            // eine schleife die jedes element in dem choices array abarbeitet
            for(x=0;x<choices.length;x++)
                  // wenn das element nicht gleich NULL ist,...
                  if(choices[x] != null){
                        // ...kopiere es ins output array und...
                        output.push(choices[x]);
                        // ...markiere es in der selectbox
                        MC.options[x].selected = true;
                  // wenn es doch gleich NULL ist,...
                  } else {
                        // ...hebe die markierung in der selectbox auf.
                        MC.options[x].selected = false;
                  }
            
            // schreibe alle verbliebenen elemente aus dem output array durch ein semicolon getrent in das inputfield
            TARGET.value = output.join(';');  
        }
      -->
    </script>
  </head>
  <body>
  
    
    <form class="mjocc">  
      <fieldset>
        <legend>Multiple-Javascript-One-Click-Choice</legend>
        <input type="text" id="target" value="" readonly onclick="toggleID('choice')"><br>  
        <select size="6" id="choice" multiple onclick="copy(this,'target')">  
          <option value="1">asdasd 1</option>  
          <option value="2">asdasd 2</option>  
          <option value="3">asdasd 3</option>  
          <option value="4">asdasd 4</option>  
          <option value="5">asdasd 5</option>  
          <option value="6">asdasd 6</option>  
        </select>
      </fieldset>
    </form>
  
  </body>
</html>

Habe es auch mal mit ein paar Kommentaren versehen ;)

Fehlt noch was... ahja:

Habe es nur im Firefox getestet und
Wenn man nun beim markieren die Steuerungstaste gedrückt hält, kommt es zu einem unerwünschtem Ergebnis. Ob man diese beheben kann weiss ich nicht, ich habe da jedenfalls gerade keine spontane Idee zu.

Wenn ich mal fragen darf, wozu brauchst du das eigentlich in dieser Form - also die Übertragung von den Markierungen in eine Semikolon getrennte Zeichenkette ?

Gruß Arano

Hallo,
dein Script ist nice

.
Gibt es evtl. noch die Möglichkeit das beim laden der Seite die Auswahl automatisch anhand vom value im input feld ausgewählt werden?

German Question JavaScript Development