JS Problem

gp812 · 21.11.2008

Servus.
Hab in JS eine Funktion, die in einem <select> eins der Optionen ändert.

PHP:

function AddOption(id, frage1, frage2)
    {
        var antwort = document.getElementById(id).text;
        var antwort1 = '';
        var antwort2 = '';
        if(frage1.length > 0)
        {
            antwort1 = prompt(frage1,'');
            if(antwort1.length > 0)
            {
                antwort = antwort1;
                
                if(frage2.length > 0)
                {
                    antwort2 = prompt(frage2,'');
                    if(antwort2.length > 0)
                        antwort = antwort + ' (' + antwort2 + ')';
                }
            }
        }
        
        document.getElementById(id).text = antwort;
        document.getElementById(id).value = 'new|' + antwort1 + '|' + antwort2;
        alert(document.getElementById(id).text);
    }

Aufruf erfolgt etwa so :

PHP:

<option value="" id="Form_New" onclick="AddOption('Form_New', 'Bezeichnung?', 'K&uuml;rzel');">Neu</option>

Das Problem, es passiert nichts. Also das alert() zeigt das Richtige, aber in Formular ändert sicht nichts. Bitte um Hilfe.

Christian · 25.11.2008

AW: JS Problem

Hallo!
Also das Problem müsste meines Erachtens sein, dass das text-Attribut des Option-Tags nicht gültig ist und somit von dem Browser nicht weiter beachtet wird.
Der Grund warum es dennoch über das alert angezeigt wird müsste demnach ein Delay (Zeitverzögerung) zwischen dem Abspeichern des Attribut-Werts und dessen Löschung sein.
Du solltest mit einem Workaround (zB Array) (Beispiel

Code:

<script type="text/javascript">

var Arr = new Array();

function AddOption(id, frage1, frage2)
    {
        var antwort = document.getElementById(id).text;
        var antwort1 = '';
        var antwort2 = '';
        if(frage1.length > 0)
        {
            antwort1 = prompt(frage1,'');
            if(antwort1.length > 0)
            {
                antwort = antwort1;
                
                if(frage2.length > 0)
                {
                    antwort2 = prompt(frage2,'');
                    if(antwort2.length > 0)
                        antwort = antwort + ' (' + antwort2 + ')';
                }
            }
        }
        //Hier wäre der sinngemäße einsatz als Workaround für ungültige Tag-Attribute
        //Um einen Datensatz aus dem Array zu löschen benutzt man folgende
        //Funktionalität:
        //
        //delete Arr[id];
        Arr[id] = antwort;
        document.getElementById(id).value = 'new|' + antwort1 + '|' + antwort2;
        alert(Arr[id]);
    }  

</script>

arbeiten.

( Quelle für gültige Option-Attribute: HTML OPTION TAG )

gp812 · 08.12.2008

AW: JS Problem

So.
Ich hab nun die Funktion geändert. Alles musste gültig sein.

PHP:

function AddOption(id, frage1, frage2)
    {
        var select = document.getElementById(id);
        var select_last = select.options.length-1;
        var option = document.getElementById(id).options[select_last];
        var antwort = option.text;
        var antwort1 = '';
        var antwort2 = '';
        var antwort_full = '';
        if(frage1.length > 0)
        {
            antwort1 = prompt(frage1,'');
            if(antwort1.length > 0)
            {
                antwort = antwort1;
                
                if(frage2.length > 0)
                {
                    antwort2 = prompt(frage2,'');
                    if(antwort2.length > 0)
                        antwort = antwort + ' (' + antwort2 + ')';
                }
            }
        }
        
        antwort_full = 'new|' + antwort1 + '|' + antwort2;
        
        alert(option.value);
        
        option.text = antwort;
        option.value = antwort_full;
        
        alert(option.value);
    }

Beide Alerts zeigen mir alles richtig. Allerdings wird in Anzeige nix geändert. Das blöde ist, die alte Funktion hat mal funktioniert (etwa vor einem Jahr), dann hab ich etwas geändert, und jetzt gehts auf ein mal nicht mehr. Was ich geändert hab, weiß ich net mehr.
Hat jemand Ahnung, was da falsch ist?

gp812 · 08.12.2008

AW: JS Problem

Also ja. Muss noch was dazu sagen. Die Form, wo dieses Select Feld ist, befindet sich in einem Div-Container. Dieses Div wird erst dann erzeugt, wenn man die Form aufruft. Sprich in Quell-Code gibt's das Div noch nicht.
Wenn man meine Funktion auf normale Form anwendet, funktioniert die auch.

Quaese · 09.12.2008

AW: JS Problem

Hi,

das erste Problem dürfte sein, dass der onclick-Handler nicht standardmässig für das option-Element definiert ist. Der IE kennt es dort z.B. gar nicht - deine Funktion würde also im Nichts verlaufen.

Stattdessen könntest du einen onchange-Handler im Select-Tag definieren. Die Fragen könntest du im title-Attribut der zugehörigen Option angeben - getrennt durch eine eindeutige Zeichenkette (im Beispiel "#-#-#").

Der Funktion wird nur noch die Referenz this übergeben. Damit ist es möglich, die aktuell gewählte Option zu ermitteln (selectedIndex).

JavaScript:

Code:

function AddOption(objSel){
  var arrSplit = objSel.options[objSel.selectedIndex].title.split("#-#-#");
  var frage1 = arrSplit[0];
  var frage2 = arrSplit[1];

  var antwort = objSel.options[objSel.selectedIndex].text;
  var antwort1 = '';
  var antwort2 = '';

  if(frage1.length > 0)
  {
      antwort1 = prompt(frage1,'');
      if(antwort1.length > 0)
      {
          antwort = antwort1;

          if(frage2.length > 0)
          {
              antwort2 = prompt(frage2,'');
              if(antwort2.length > 0)
                  antwort = antwort + ' (' + antwort2 + ')';
          }
      }
  }

  objSel.options[objSel.selectedIndex].text = antwort;
  objSel.options[objSel.selectedIndex].value = 'new|' + antwort1 + '|' + antwort2;
  alert(objSel.options[objSel.selectedIndex].value + "\n" + objSel.options[objSel.selectedIndex].text);
}

HTML

Code:

<form>
  <select onchange="if(this.selectedIndex!=0)AddOption(this);">
    <option value="">- wählen -</option>
    <option value="" title="Bezeichnung#-#-#Kürzel" id="Form_New">Neu</option>
    <option value="" title="Wie spät?#-#-#Schon morgen?" id="Form_Old">Alt</option>
  </select>
</form>

Vielleicht hilft dir das weiter.

Ciao
Quaese