AlexanderF: Javascript doppelte Einträge in Select unterbinden

SELF-Forum

Javascript doppelte Einträge in Select unterbinden

AlexanderF
– Informationen zu den Bewertungsregeln

Hallo,

ich habe das Problem das ich zwei Selectfelter habe, in 1. sind werte die man mittels Button in das zweite übernehmen kann. Nun möchte ich das er den Eintrag nur übernimmt wenn er nicht schon vorhanden ist.
Hier was ich habe bis jetzt:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Auswählen</title>

<script type="text/javascript">
<!--
function javaauswahl() {
//Selctfeld in Var
var select = document.auswahlform.select1;
// Selected Value in Var
var selecttext = select.options[select.selectedIndex].innerHTML;
// Selected wert in Var
var selectid = select.options[select.selectedIndex].value;

//Neues Objekt für Eintrag erstellen
NeuerEintrag = new Option(selecttext, selectid, false, false);
//Objekt hinzufügen
document.auswahlform.select2.options[document.auswahlform.select2.length] = NeuerEintrag;
}
//-->
</script>
</head>

<body>

<form method="POST" name="auswahlform" action="">
 <select size="6" name="select1">
 <option value="1">1. Eintrag</option>
 <option value="2">2. Eintrag</option>
 <option value="3">3. Eintrag</option>
 <option value="4">4. Eintrag</option>
 </select>
 <select size="6" name="select2">
 </select>
 <br>
 <input type="button" name="auswahl" value="Auswählen" onclick="javaauswahl();">

</form>

</body>

</html>

Danke für die Hilfe schonmal!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Javascript doppelte Einträge in Select unterbinden

    AlexanderF
    – Informationen zu den Bewertungsregeln

    Was ich noch vergessen habe zu erwähnen ist das die Value immer unterschiedlich ist im Select1. Also daran könnte man dirkt doppelte Einträge identifizieren.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Javascript doppelte Einträge in Select unterbinden

      Felix Riesterer Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Lieber AlexanderF,

      Du müsstest vor dem Einfügen jedes bereits vorhandene <option>-Element auslesen und prüfen, ob der einzufügende Wert bereits existiert. Das bekommst Du doch hin, oder?

      Liebe Grüße aus Ellwangen,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Javascript doppelte Einträge in Select unterbinden

        AlexanderF
        – Informationen zu den Bewertungsregeln

        Lieber AlexanderF,

        Du müsstest vor dem Einfügen jedes bereits vorhandene <option>-Element auslesen und prüfen, ob der einzufügende Wert bereits existiert. Das bekommst Du doch hin, oder?

        Liebe Grüße aus Ellwangen,

        Felix Riesterer.

        Ja soweit bin ich auch schon mit meinen Überlegungen ;-) , oder das man man nachdem  sich im  Select2 was ändert auf doppelte einträge überprüft und löscht.
        Das Problem ist nur das ich das eben nicht hinbekomme sonst hätte ich ja nicht gepostet ;-)

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Javascript doppelte Einträge in Select unterbinden

          Felix Riesterer Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Lieber AlexanderF,

          Das Problem ist nur das ich das eben nicht hinbekomme sonst hätte ich ja nicht gepostet ;-)

          aber Du hast doch alle wesentlichen Dinge schon in Deiner Funktion da! Schauen wir sie uns genauer an:

          function javaauswahl() {  
//Selctfeld in Var  
var select = document.auswahlform.select1;  
// Selected Value in Var  
var selecttext = select.options[select.selectedIndex].innerHTML;  
// Selected wert in Var  
var selectid = select.options[select.selectedIndex].value;  
  
//Neues Objekt für Eintrag erstellen  
NeuerEintrag = new Option(selecttext, selectid, false, false);  
//Objekt hinzufügen  
document.auswahlform.select2.options[document.auswahlform.select2.length] = NeuerEintrag;  
}

          Da steht, wie Du auf die Optionen eines Select-Feldes zugreifen kannst. Was Du mit document.auswahlform.select1 machen kannst, das kannst Du auch mit document.auswahlform.select2 machen, oder nicht?

          Wie Du Werte in JavaScript vergleichst, steht natürlich auch in SELFHTML. Schauen wir uns doch das Kapitel mit den Verzweigungen an: <http://de.selfhtml.org/javascript/sprache/bedingt.htm@title=Bedingte Anweisungen (if-else/switch)>

          Du brauchst also eine if-Abfrage, wie im SELFHTML-Beispiel vorgestellt. Da Du aber alle Optionen einzeln durchprüfen willst, brauchst Du natürlich auch noch eine Schleife, innerhalb derer Du das tust. Schleifen findest Du hier: <http://de.selfhtml.org/javascript/sprache/schleifen.htm@title=Schleifen (while/for/do-while)>

          Du könntest mit einer for-Schleife glücklich werden. Vor der Schleife definierst Du eine variable "vorhanden", der Du den Wert "false" gibst. In der Schleife vergleichst Du dann den gerade vorhandenen Wert mit dem einzufügenden. Sollte er bereits existieren, setzt Du die Variable "vorhanden" auf "true" und kannst dann das Einfügen damit verhindern.

          Klar soweit?

          Liebe Grüße aus Ellwangen,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Javascript doppelte Einträge in Select unterbinden

            AlexanderF
            – Informationen zu den Bewertungsregeln

            Danke erstmal für die ausführliche Antwort. Ich denke eher das mein Problem ist das ich nicht weiß wie ich die select werte abfrage. Schleifen und If abfragen bekomme ich wohl hin. Aber in welchen Array finde ich denn die werte und values der select box?

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. Javascript doppelte Einträge in Select unterbinden

            AlexanderF
            – Informationen zu den Bewertungsregeln

            Hallo,

            also ich habe mich mal durchgekämpft aber wirklich weiter es funktioniert auch teilweise (wenn ein Eintrag vorhanden ist trägt er ihn nicht mehr ein), aber Einträge die nicht vorhanden sind trägt er nur 2. mal ein und den dreht es durch ;-)
            Außerdem meldet er Java Fehler. Wo liegt mein Fehler. Hier mein Script:

            <script type="text/javascript">
            <!--
            function javaauswahl() {

            //Selctfeld in Var
              var select = document.auswahlform.select1;
              // Selected Value in Var
              var selecttext = select.options[select.selectedIndex].innerHTML;
              // Selected wert in Var
              var selectid = select.options[select.selectedIndex].value;

            // Wenn Select 2 bereits Einträge hat...
              if (document.auswahlform.select2.length > 0) {
                //Checken ob Eintrag Vohanden

            for (var i = 1; i <= document.auswahlform.select2.length; i++) {
                  if (document.auswahlform.select2.options[i].value != selectid) {
                    //Neues Objekt für Eintrag erstellen
                    NeuerEintrag = new Option(selecttext, selectid, false, false);
                    //Objekt hinzufügen
                    document.auswahlform.select2.options[document.auswahlform.select2.length] = NeuerEintrag;
                  }
                }
              } else {
                //Neues Objekt für Eintrag erstellen
                NeuerEintrag = new Option(selecttext, selectid, false, false);
                //Objekt hinzufügen
                document.auswahlform.select2.options[document.auswahlform.select2.length] = NeuerEintrag;
              }
            }
            //-->
            </script>

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Javascript doppelte Einträge in Select unterbinden

              AlexanderF
              – Informationen zu den Bewertungsregeln

              Bei dem hier geposteten Script habe ich i=1 in meinen Script ist es aber i=0. Nur zu Info

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

            2. Javascript doppelte Einträge in Select unterbinden

              Felix Riesterer Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Lieber AlexanderF,

              Dein Script ist doch schon ein sehr schöner Ansatz! Schauen wir uns mal die Feinheiten an:

              function javaauswahl() {  
  
  //Selctfeld in Var  
  var select = document.auswahlform.select1;  
  // Selected Value in Var  
  var selecttext = select.options[select.selectedIndex].innerHTML;  
  // Selected wert in Var  
  var selectid = select.options[select.selectedIndex].value;

              Soweit war das ja klar. Warum musst Du nun extra prüfen, ob bereits Auswahlmöglichkeiten im zweiten Select sind? Das mag vielleicht Performance-Verbesserungen versprechen, ist in der Praxis aber nur unnötig umständlich. Lasse also die erste if-Abfrage sein!

              Damit geht es in Deinem Script dann logischerweise so weiter:

                
    //Checken ob Eintrag Vohanden  
    for (var i = 0; i <= document.auswahlform.select2.length; i++) {  
      if (document.auswahlform.select2.options[i].value != selectid) {  
        //Neues Objekt für Eintrag erstellen  
        NeuerEintrag = new Option(selecttext, selectid, false, false);  
        //Objekt hinzufügen  
        document.auswahlform.select2.options[document.auswahlform.select2.length] = NeuerEintrag;  
      }  
    }  
} // Ende der function

              Ich habe den Startwert von i auf null gesetzt, so wie Du es noch angemerkt hattest.

              Wo ist die von mir vorgeschlagene Variable "vorhanden"? Die brauchst Du unbedingt als Merker, da Du sonst bei jedem vorhandenen Auswahlwert, der sich vom einzufügenden unterscheidet, eine Eintragung vornimmst, was je nach Anzahl entsprechend mehrfach geschähe! Schau Dir Deine if-Anweisung an! Wenn unterschiedlich, dann einfügen -> egal wie oft!

              Also muss vor die for-Schleife noch der Merker! Code sieht jetzt so aus:

                
  // Merker erzeugen  
  var vorhanden = false;  
  
  //Checken ob Eintrag Vohanden  
  for (var i = 0; i <= document.auswahlform.select2.length; i++) {  
    if (document.auswahlform.select2.options[i].value == selectid) {  
      // Aha! Wert also schon vorhanden! -> Merken!  
          vorhanden = true;  
    }  
  }  
  
  // Jetzt wissen wir, ob wir einfügen dürfen, oder ob nicht:  
  if (!vorhanden) { // Ausrufezeichen invertiert false zu true und umgekehrt,  
                    // lies: "if (nicht vorhanden)"  
    // jetzt einfügen:  
    var neu = new Option(selecttext, selectid, false, false);  
      document.auswahlform.select2.options[document.auswahlform.select2.length] = neu;  
  }  
} // Ende der function

              Klarer geworden?

              Liebe Grüße aus Ellwangen,

              Felix Riesterer.

              --
              ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln