Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Spezielle Multiple Select Box

Frage Entwicklung JavaScript

Mitglied: Simplex-Media

Simplex-Media (Level 1) - Jetzt verbinden

24.10.2008, aktualisiert 25.10.2008, 4593 Aufrufe, 6 Kommentare

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...
Mitglied: Arano
24.10.2008 um 01:53 Uhr
Aha, hm, hm, ähhm...

*tippel tippel*

01.
<html> 
02.
  <head> 
03.
    <title>Simplex</title> 
04.
    <style type="text/css"> 
05.
      <!-- 
06.
        .mjc fieldset        { border:1px solid #c0c0c0; } 
07.
        .mjc fieldset input  { width:250px; } 
08.
        .mjc fieldset select { display:none; } 
09.
      --> 
10.
    </style> 
11.
    <script type="text/javascript"> 
12.
      <!-- 
13.
        function copy(MC,TARGET_ID){ 
14.
            var TARGET = document.getElementById(TARGET_ID); 
15.
            var values = new Array(); 
16.
            for(x=0;x<MC.length;x++) 
17.
                  if(MC.options[x].selected === true) 
18.
                       values.push(MC.options[x].value); 
19.
            TARGET.value = values.join(';'); 
20.
21.
         
22.
        function toggleID(ID){ 
23.
            var TARGET = document.getElementById(ID); 
24.
            if(TARGET.style.display != 'block') 
25.
                  TARGET.style.display = 'block'; 
26.
            else 
27.
                  TARGET.style.display = 'none'; 
28.
29.
      --> 
30.
    </script> 
31.
  </head> 
32.
  <body> 
33.
   
34.
    <form class="mjc"> 
35.
      <fieldset> 
36.
        <legend>Multiple-Javascript-Choice</legend> 
37.
        <input type="text" id="target" value="" readonly onclick="toggleID('choice')"><br> 
38.
        <select size="6" id="choice" multiple onchange="copy(this,'target')"> 
39.
          <option>asdasd 1</option> 
40.
          <option>asdasd 2</option> 
41.
          <option>asdasd 3</option> 
42.
          <option>asdasd 4</option> 
43.
          <option>asdasd 5</option> 
44.
          <option>asdasd 6</option> 
45.
        </select> 
46.
      </fieldset> 
47.
    </form> 
48.
   
49.
  </body> 
50.
</html>
So oder ?

Gruß Arano
Bitte warten ..
Mitglied: Simplex-Media
24.10.2008 um 12:42 Uhr
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?
Bitte warten ..
Mitglied: Arano
25.10.2008 um 00:15 Uhr
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
Bitte warten ..
Mitglied: Simplex-Media
25.10.2008 um 00:45 Uhr
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
Bitte warten ..
Mitglied: Arano
25.10.2008 um 05:46 Uhr
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:
01.
<html> 
02.
  <head> 
03.
    <title>Simplex</title> 
04.
    <style type="text/css"> 
05.
      <!-- 
06.
        .mjocc fieldset        { border:1px solid #c0c0c0; } 
07.
        .mjocc fieldset input  { width:250px; } 
08.
        .mjocc fieldset select { display:none; } 
09.
      --> 
10.
    </style> 
11.
    <script type="text/javascript"> 
12.
      <!-- 
13.
        function toggleID(ID){ 
14.
            var TARGET = document.getElementById(ID); 
15.
            if(TARGET.style.display != 'block') 
16.
                  TARGET.style.display = 'block'; 
17.
            else 
18.
                  TARGET.style.display = 'none'; 
19.
20.
         
21.
        // in diesem Array werden die schon getaetigten markierungen gespeichert 
22.
        var choices = new Array(); 
23.
        function copy(MC,TARGET_ID){ 
24.
            // MC        = objectreferenz auf die selectbox(MultipleCoice) 
25.
            // TARGET_ID = die ID des inputfields in dem die liste angezeigt werden soll 
26.
            // erstelle eine objectrefferenz zu dem inputfield und speichere sie in TARGET 
27.
            var TARGET = document.getElementById(TARGET_ID); 
28.
             
29.
            // eine schleife die jede option der selectbox abarbeitet 
30.
            for(x=0;x<MC.length;x++) 
31.
                  // wenn die aktuelle option markiert wurde... 
32.
                  if(MC.options[x].selected === true) 
33.
                        // ...fuege sie dem array choices hinzu. 
34.
                        // wenn die position in dem array choices schon belegt ist, ... 
35.
                        if(choices[x] != null) 
36.
                              // ... hebe markierung auf und speichere statt dessen NULL 
37.
                              choices[x] = null; 
38.
                        // andernfalls speichere den wert in dem array 
39.
                        else  choices[x] = MC.options[x].value; 
40.
             
41.
            // in diesem array werden nur die markierten werte aus dem array<choices gespeichert (ohne leere zwischenpositionen) 
42.
            var output = new Array(); 
43.
            // eine schleife die jedes element in dem choices array abarbeitet 
44.
            for(x=0;x<choices.length;x++) 
45.
                  // wenn das element nicht gleich NULL ist,... 
46.
                  if(choices[x] != null){ 
47.
                        // ...kopiere es ins output array und... 
48.
                        output.push(choices[x]); 
49.
                        // ...markiere es in der selectbox 
50.
                        MC.options[x].selected = true; 
51.
                  // wenn es doch gleich NULL ist,... 
52.
                  } else { 
53.
                        // ...hebe die markierung in der selectbox auf. 
54.
                        MC.options[x].selected = false; 
55.
56.
             
57.
            // schreibe alle verbliebenen elemente aus dem output array durch ein semicolon getrent in das inputfield 
58.
            TARGET.value = output.join(';'); 
59.
60.
      --> 
61.
    </script> 
62.
  </head> 
63.
  <body> 
64.
   
65.
     
66.
    <form class="mjocc"> 
67.
      <fieldset> 
68.
        <legend>Multiple-Javascript-One-Click-Choice</legend> 
69.
        <input type="text" id="target" value="" readonly onclick="toggleID('choice')"><br> 
70.
        <select size="6" id="choice" multiple onclick="copy(this,'target')"> 
71.
          <option value="1">asdasd 1</option> 
72.
          <option value="2">asdasd 2</option> 
73.
          <option value="3">asdasd 3</option> 
74.
          <option value="4">asdasd 4</option> 
75.
          <option value="5">asdasd 5</option> 
76.
          <option value="6">asdasd 6</option> 
77.
        </select> 
78.
      </fieldset> 
79.
    </form> 
80.
   
81.
  </body> 
82.
</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
Bitte warten ..
Mitglied: Simplex-Media
11.03.2009 um 09:31 Uhr
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?
Bitte warten ..
Ähnliche Inhalte
Windows Netzwerk
RDP-Verbindung funktioniert nicht über Fritz!Box-VPN (7)

Frage von MIlexx zum Thema Windows Netzwerk ...

Internet
No ip Set top Box und kabel bw (4)

Frage von winlin zum Thema Internet ...

Windows Server
gelöst Domänen Benutzer via RDP Anmeldung am WDC für spezielle Aufgabe (11)

Frage von zeroblue2005 zum Thema Windows Server ...

Neue Wissensbeiträge
Windows 10

Windows 8.x oder 10 Lizenz-Key aus dem ROM auslesen mit Linux

(6)

Tipp von Lochkartenstanzer zum Thema Windows 10 ...

Tipps & Tricks

Wie Hackt man sich am besten in ein Computernetzwerk ein

(38)

Erfahrungsbericht von Herbrich19 zum Thema Tipps & Tricks ...

Heiß diskutierte Inhalte
Festplatten, SSD, Raid
POS Hardware und alternativen zu Raid 1? (21)

Frage von Brotkasten zum Thema Festplatten, SSD, Raid ...

Windows 10
gelöst Windows 10 Home "Netzlaufwerk nicht bereit" (19)

Frage von Oggy01 zum Thema Windows 10 ...

Viren und Trojaner
Verschlüsselungstrojaner simulieren (18)

Frage von AlbertMinrich zum Thema Viren und Trojaner ...

Exchange Server
Exchange Postfach leeren - nicht löschen (11)

Frage von AndreasOC zum Thema Exchange Server ...