scope5: Wie kann man auf ein optgroup element zugreifen?

Hi,
wie kann man unter javascript auf ein optgroup element zugreifen?
Oder wie bekommt man die Anzahl aller option elemente die zu einer optgroup gehören raus?`

Greetingz
Scope5

  1. Hallo,

    wie kann man unter javascript auf ein optgroup element zugreifen?
    Oder wie bekommt man die Anzahl aller option elemente die zu einer optgroup gehören raus?`

    Beispiel:

    <form ...>
      <select name="auswahl">
        <optgroup id="a1" label="Auswahl 1">
          <option value="a">a</option>
          <option value="b">b</option>
          <option value="c">c</option>
          <option value="d">d</option>
          <option value="e">e</option>
        </optgroup>
      </select>
    </form>

    -----

    var anz=document.getElementById("a1").getElementsByTagName("option").length;
    alert(anz); // 5

    MfG, Thomas

    1. Hi,
      leider funktionieren eure Lösungen nur unter dem Internet Explorer und nicht unter Mozilla Firefox. Dort wird immer eine Anzahl von 0 ausgegeben.

      Scope5

      1. Hi Scope5,

        O.O

        poste mal bitte Dein Script!

        Gruß aus Berlin!
        eddi

        1. Mein Skript:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
                 "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title>test</title>
          <script type="text/javascript">
          <!--
          function update() {
          var anz=document.getElementById("test").getElementsByTagName("option").length;
          alert (anz);
          }
          // -->
          </script>
          </head>
          <html>
          <body>
          <form name='albumMgmt'>
          <table>
          <tr>
          <td>
          <select name="albums" size="5" multiple>
          <option value='Album1'>Album1</option>
          <option value='Album2'>Album2</option>
          <option value='Album3'>Album3</option>
          <option value='Album4'>Album4</option>
          </select>
          </td><td>
          <select name="user" size="5" multiple>
          <option value='1'>User1</option>
          <option value='2'>User2</option>
          <option value='3'>User3</option>
          <option value='4'>User4</option>
          </select>
          </td><td>
          <input type='button' value='-->' onClick='update()' />
          <br />
          <input type='button' value='<--' submit='update()' />
          </td><td>
          <select name="relations" size="5" multiple>
          <optgroup label='Album1'>Album1
          <option value='Album2'>Album2</option>
          </optgroup>
          <optgroup label='Album7' id='test'>Album7
          <option value='Album3'>Album3</option>
          <option value='Album4'>Album4</option>
          </optgroup>
          </select>
          </td>
          </tr>
          </table>
          </form>
          </body>
          </html>

          1. Hallo,

            <optgroup label='Album7' id='test'>Album7

            ^^^
            optgroup hat keinen Textinhalt.

            Ansonsten mal noch mind. das <-Zeichen im value des input-Elements maskieren.

            Außerdem zwischen HTML 4.01 und XHTML entscheiden.

            MfG, Thomas

            1. Hi,
              danke. So klappt es auch unter Firefox.
              Doch jetzt hab ich direkt das nächste Prob.
              Wie kann ich jetzt ein Option Element einfügen?
              Das klappt irgendwie nicht(obwohl ich es logisch finde):
              var newObj = new Option('test','test');
              document.getElementById("test").getElementsByTagName("option")[document.getElementById("test").getElementsByTagName("option").length]=newObj;

              1. Re:

                vom Prinzip her etwa so:

                var a=document.getElementById("test")
                var b=document.createElement('option')
                var c=document.createTextNode('Dein text')
                b.appendChild(c)
                b.value="gggggggggggggggggggggg"
                a.appendChild(b)

                Und das Aushängen (möglicherweise je Deine nächste Frage ;) kannst Du mit removeChild() bewerkstelligen. (http://de.selfhtml.org/javascript/objekte/node.htm#remove_child)

                Gruß aus Berlin!
                eddi

  2. Hi scope5,

    das geht wie bei jedem anderen Element auch hier mit document.getElementsByTagName('optgroup')[zahl] http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name.
    Sind keine weiteren Kindelemente als <option> enthalten (keine weiteren <optgroup> mit eigenen Kindelementen) dann bekommst Du alle <option> am besten mit document.getElementsByTagName('optgroup')[bsw_(2)].getElementsByTagName('option') den Zugrif. Dabei wird dann ein Array ausgegeben, welches sich mit einem for()-Schleife sehr schön durchlaufen läßt ;)

    Gruß aus Berlin!
    eddi