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, 4565 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 ..
Neuester Wissensbeitrag
Microsoft

Lizenzwiederverkauf und seine Tücken

(5)

Erfahrungsbericht von DerWoWusste zum Thema Microsoft ...

Ähnliche Inhalte
Monitoring
gelöst Spezielle Aufgaben in Zabbix (4)

Frage von honeybee zum Thema Monitoring ...

Router & Routing
Neue Top Level Domain .box bringt manche Netze durcheinander (1)

Link von magicteddy zum Thema Router & Routing ...

Router & Routing
Neue Top Level Domain .box bringt manche Fritzbox-Netze durcheinander (3)

Link von mikrotik zum Thema Router & Routing ...

TK-Netze & Geräte
Panasonic KX-TG6811 an Fritz Box 7490 (21)

Frage von bytetix zum Thema TK-Netze & Geräte ...

Heiß diskutierte Inhalte
Windows Netzwerk
Windows 10 RDP geht nicht (16)

Frage von Fiasko zum Thema Windows Netzwerk ...

Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...

Microsoft Office
Keine Updates für Office 2016 (13)

Frage von Motte990 zum Thema Microsoft Office ...