Thema: multiple-select feld nr1 durch eingabe in nr2 komplettieren

hallo zusammen!

Ich habe folgendes Problem zu lösen.

In einem Formular (derzeit ohne ID aber falls notwendig ergänzbar) befinden sich 2 Multiple-Select Felder, deren Option-Einträge sich teilweise durch ihre Values überschneiden. Die Values sind IDs bezogen auf Websitemodule welche in einer DB gespeichert sind. Dies ist aber hier nicht weiter wichtig.

Nun möchte ich, dass sofern im Select-Feld-Nr. 1 ein Eintrag markiert wird, der Eintrag mit dem selben Value im Select-Feld-Nr. 2 ebenfalls markiert wird.

Ich selber muss ehrlich gesagt zugeben dass mir einfach grundlegende Kenntnisse von Javascript fehlen um das ganze elegant zu lösen. Dankbar wäre ich also für gute Lösungsansätze sowie evtl. interessante Webseiten zum Thema Einführung in JS. Denn in naher Zukunft möchte ich mir, sofern die Zeit da ist, auch AJAX aneignen.

Ich danke euch im voraus!

Gruß, David

2

Re: multiple-select feld nr1 durch eingabe in nr2 komplettieren

Hi,

habe leider grad wenig Zeit, daher hier ein kurzes Beispiel, wie man sowas lösen könnte. Dazu gibts sicherlich bessere Wege aber ich hatte nur ein paar Minuten Zeit ;o)

<script>
var setOption = function(f)
{
    for (var i=0; i<f.nr2.options.length; i++)
    {
        if (f.nr2.options[i].value == f.nr1.value)
        {
            f.nr2.options[i].selected = true;
        }
    }
}
</script>


<form>
<select name="nr1" onchange="setOption(this.form);">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>
<select name="nr2">
    <option value="1">1</option>
    <option value="b">b</option>
    <option value="3">3</option>
    <option value="d">d</option>
</select>
</form>

Hoffe das hilft Dir weiter.

vg
Hannes

_______________________________________________________________

/-/annes (j|g) ... http://www.jg-webdesign.de

3

Re: multiple-select feld nr1 durch eingabe in nr2 komplettieren

Erstmal großes Dankeschön!

Aber leider funktioniert es nicht. Auch nicht nach Anpassung aller Parameter...

function setOptions(form,nr1,nr2) {
    for(var i=0; i<form.nr2.options.length; i++) {
        if (form.nr2.options[i].value == form.nr1.value) {
            form.nr2.options[i].selected = true;
            }
        }
    }

aufruf erflolgt so

onclick="setOptions(this.form,'schreiben_ja[]','lesen_ja[]');"

Dieser Tag steht im Select-Multiple Feld Namens "schreiben_ja[]" und soll eben die Daten in "lesen_ja[]" aktivieren/markieren/selektieren!

Der wesentlichste Unterschied ist denke ich dass ich Multiple-Felder verwende und um Arrays zu erhalten eben ein "[]" hinter den Namen setze.

Habe es auch schon mit folgendem Code probiert aber das hat auch nicht funktioniert:

function setOptions(form,nr1,nr2) {
    var form=document.getElementById(form)
    var nr1=getElementByName(nr1)
    var nr2=getElementByName(nr2)
    for(var i=0; i<form.nr2.options.length; i++) {
        if (form.nr2.options[i].value == form.nr1.value) {
            form.nr2.options[i].selected = true;
            }
        }
    }

und

onclick="setOptions('form','schreiben_ja[]','lesen_ja[]');"

Das Formular hat natürlich die ID 'Form' erhalten!

Brauche da noch etwas Hilfe bitte!

4

Re: multiple-select feld nr1 durch eingabe in nr2 komplettieren

Poste doch mal das vollständige HTML + Script, dann kann man eher sehen wo bei Dir das Problem liegt.

_______________________________________________________________

/-/annes (j|g) ... http://www.jg-webdesign.de

5

Re: multiple-select feld nr1 durch eingabe in nr2 komplettieren

HTML-Datei

<form id="form" method="post" action="ziel.php">

<select name="lesen_ja[]" multiple>
   <option value="1">Eins</option>
   <option value="2">Zwei</option>
   <option value="3">Drei</option>
</select>

<select name="schreiben_ja[]" onclick="setOptions('form','schreiben_ja[]','lesen_ja[]');" multiple>
   <option value="1">Eins</option>
   <option value="3">Drei</option>
   <option value="7">Sieben</option>
</select>

<input submit usw>
</form>

Eingebundene JS-Datei (ist korrekt eingebunden, andere Scripts funktionieren auch)

function setOptions(form,nr1,nr2) {
    var form=document.getElementById(form)
    var nr1=getElementByName(nr1)
    var nr2=getElementByName(nr2)
    for(var i=0; i<form.nr2.options.length; i++) {
        if (form.nr2.options[i].value == form.nr1.value) {
            form.nr2.options[i].selected = true;
            }
        }
    }

Was ich an JS z.b. noch grundlegendes auch gar nicht verstehe ist, wann man einen Tag mit ";" Semikolon abschliest und wann nicht. Die Deklarierung einer Variablen ist doch letztendlich auch ein Befehl oder nicht?

Danke für die Hilfe

6

Re: multiple-select feld nr1 durch eingabe in nr2 komplettieren

Hier ein weiteres Beispiel für Deine Anforderung:

<script>
var setOptions = function(f)
{
    for (var i=0; i<f.elements['lesen_ja[]'].options.length; i++)
    {
        f.elements['lesen_ja[]'].options[i].selected = false;
    }
    for (var i=0; i<f.elements['lesen_ja[]'].options.length; i++)
    {
        if (f.elements['lesen_ja[]'].options[i].value == f.elements['schreiben_ja[]'].value)
        {
            f.elements['lesen_ja[]'].options[i].selected = true;
        }
    }
}
</script>


<form id="form" method="post" action="ziel.php">

<select name="lesen_ja[]" multiple>
   <option value="1">Eins</option>
   <option value="2">Zwei</option>
   <option value="3">Drei</option>
</select>

<select name="schreiben_ja[]" onclick="setOptions(this.form);" multiple>
   <option value="1">Eins</option>
   <option value="3">Drei</option>
   <option value="7">Sieben</option>
</select>

<input submit usw>
</form>

Der Knackpunkt dabei liegt in den Select-Namen mit [] .. das kann man in JS nur über das elements-Array des form-Objekts abfragen. Wenn man das weiß, ist der Rest aber kein Problem mehr ;o) Ich habe am Anfang der Funktion noch eine Schleife eingefügt, die zunächst jede Selektion der Selectbox 1 löscht.

_______________________________________________________________

/-/annes (j|g) ... http://www.jg-webdesign.de

7

Re: multiple-select feld nr1 durch eingabe in nr2 komplettieren

Ich danke dir vielmals! Hatte mir schon gedacht dass es am mulitple/[] liegt. Habe die Select-Entfernende-Schleife noch entfernt weil es ja schließlich auch noch Datensätze wie z.b. Nr. 2 gibt die im Zweiten Array gar nicht vorkommen aber evtl schon aktiviert sind. Aber danke auf jeden Fall, ist genau das was ich brauchte!

Muss mir dringend mal die Zeit nehmen das alles zu lernen...



okay... jetzt folgt das nächste Problem auf dem Fuße...

Da es sich ja um Multiple-Select-Felder handelt sind per Drücken der STRG/Apfel-Taste + Mausklick Mehrfachauswahlen möglich. Das Problem ist nun, dass das Script nur solange seinen Job erfüllt, nämlich gleiche Felder selektieren, wenn ein einfach Linksklick durchgeführt wird. Sobald man per STRG/Apfel-Taste + Mausklick mehrere Einträge auswählt reagiert das Script überhaupt nicht.

Habe versucht andere Eventhandler auch noch hinzufügen, aber weder onmousemove, noch onclick, noch onchange, noch onkeypress bringen das gewünschte Ergebnis!

Was merkwürdig ist, ist folgendes: Wähle ich den ersten Options-Eintrag per gedrückter STRG/Apfel-Taste+Mausklick aus, so wird er auch im anderen Feld aktiviert. Alle annderen Einträge können nur bei normalem Mausklick mitaktiviert werden. Die Values sind aber genau dieselben. Daran kann es also nicht liegen!

Gibt es eine Möglichkeit das Problem zu lösen?

Zuletzt bearbeitet von yxc86 (05-08-2007 00:26:28)

8

Re: multiple-select feld nr1 durch eingabe in nr2 komplettieren

Schau mal, ob das folgende Beispiel so ist, wie Du es brauchst:

<script>
var setOptions = function(f)
{
    var merker = [];
    var schreiben = f.elements['schreiben_ja[]'];
    var lesen = f.elements['lesen_ja[]'];
    for (var i=0; i<schreiben.options.length; i++)
    {
        if (schreiben.options[i].selected == true)
        {
            //alert( schreiben.options[i].value )
            merker.push(schreiben.options[i].value);
        }
    }

    f.debug.value = merker;
    
    for (var i=0; i<lesen.options.length; i++)
    {
        lesen.options[i].selected = false;
        for (var j=0; j<merker.length; j++)
        {
            if (lesen.options[i].value == merker[j])
            {
                lesen.options[i].selected = true;
            }
        }
    }
}
</script>


<form id="form" method="post" action="ziel.php">

<select name="lesen_ja[]" multiple >
   <option value="1">Eins</option>
   <option value="2">Zwei</option>
   <option value="3">Drei</option>
</select>

<select name="schreiben_ja[]" onchange="setOptions(this.form);" multiple>
   <option value="1">Eins</option>
   <option value="3">Drei</option>
   <option value="7">Sieben</option>
</select>

<input type="text" name="debug">
</form>
_______________________________________________________________

/-/annes (j|g) ... http://www.jg-webdesign.de