Ankündigung

Einklappen
Keine Ankündigung bisher.

JS: Auswahl Dropdown Box2 ändern wenn Dropdown Box1 geändert

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    JS: Auswahl Dropdown Box2 ändern wenn Dropdown Box1 geändert

    Hi Community,

    Habe jetzt schon mal per Google und auf diversen Seiten gesucht,
    aber nicht's passendes/funktionierendes gefunden.

    Ich habe ein Startdatum welches auf 3 Dropdowns
    besteht (Tag, Monat, Jahr). Daneben steht eine Startzeit und Endzeit dieses Datums. Desweitern habe ich ein Enddatum mit den gleichen Feldern (auch Start und Endzeit).

    Wenn das Startdatum verändert wird, soll automatisch ohne die Seite neu zu laden das Enddatum angepasst werden. Kann mir jemand sagen wie das gehen könnte? Ich habe es schon versucht, und es klappt sogar fast. Der Tag und der Monat verändert sich, das Datum wird jedoch nicht angepasst.

    So meine erste Frage:
    1) Warum funktioniert die Änderung/Anpassung des Jahres nicht?

    Desweiten soll, wenn die Startzeit geändert wird, soll die Auswahl der Endzeit automatisch geändert werden. Leider funktioniert das überhaupt nicht wie ich es gemacht hab.

    2) Was muss ich wie ändern, damit es funktioniert? Habe nicht viel Ahnung von JS Ich will kein fertigen Quellcode, ich möchte nur eine Lösung, die ich auch verstehe

    Hier der Quellcode (bischen viel, sorry, aber man kann alles kopieren um es lokal mal zu testen)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title></title>
<script type="text/javascript">
  function setDatum(form) {
    var tag   = form.abday.options[form.abday.selectedIndex].value;
    var monat = form.abmonth.options[form.abmonth.selectedIndex].value;
    var jahr  = form.abyear.options[form.abyear.selectedIndex].value;
    form.anday.selectedIndex = tag-1;
    form.anmonth.selectedIndex = monat-1;
    form.anyear.selectedIndex = jahr-1;
  }
  function setZeitAb(form) {
    var zeit = form.abvon.options[form.abvon.selectedIndex].value;
    form.abbis.selectedIndex = zeit;
  }
  function setZeitAn(form) {
    var zeit = form.anvon.options[form.anvon.selectedIndex].value;
    form.anbis.selectedIndex = zeit;
  }
</script>
</head>

<body>

<form action="test.html" method="post" name="fracht">

<select name="abday" style="width:42px;"tabindex="9" onChange="setDatum(this.form)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23" selected>23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="abmonth" style="width:42px;"tabindex="10" onChange="setDatum(this.form)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>

<select name="abyear" style="width:58px;"tabindex="11" onChange="setDatum(this.form)">
<option value="2007" selected>2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>

        

<select name="abvon" style="width:60px"tabindex="12" onChange="setZeitAb(this.form)">
<option value="00:00:00" selected>00.00</option>
<option value="00:15:00">00.15</option>
<option value="00:30:00">00.30</option>
<option value="00:45:00">00.45</option>
<option value="01:00:00">01.00</option>
<option value="01:15:00">01.15</option>
<option value="01:30:00">01.30</option>
<option value="01:45:00">01.45</option>
<option value="02:00:00">02.00</option>
<option value="02:15:00">02.15</option>
<option value="02:30:00">02.30</option>
<option value="02:45:00">02.45</option>
<option value="03:00:00">03.00</option>
</select>
     bis 
<select name="abbis" style="width:60px">
<option value="00:00:00" selected>00.00</option>
<option value="00:15:00">00.15</option>
<option value="00:30:00">00.30</option>
<option value="00:45:00">00.45</option>
<option value="01:00:00">01.00</option>
<option value="01:15:00">01.15</option>
<option value="01:30:00">01.30</option>
<option value="01:45:00">01.45</option>
<option value="02:00:00">02.00</option>
<option value="02:15:00">02.15</option>
<option value="02:30:00">02.30</option>
<option value="02:45:00">02.45</option>
<option value="03:00:00">03.00</option>
</select>






<select name="anday" style="width:42px;"tabindex="22">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23" selected>23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="anmonth" style="width:42px;"tabindex="23">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>

<select name="anyear" style="width:58px;"tabindex="24">
<option value="2007" selected>2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>

        

<select name="anvon" style="width:60px"tabindex="25" onChange="setZeitAn(this.form)">
<option value="00:00:00" selected>00.00</option>
<option value="00:15:00">00.15</option>
<option value="00:30:00">00.30</option>
<option value="00:45:00">00.45</option>
<option value="01:00:00">01.00</option>
<option value="01:15:00">01.15</option>
<option value="01:30:00">01.30</option>
<option value="01:45:00">01.45</option>
<option value="02:00:00">02.00</option>
<option value="02:15:00">02.15</option>
<option value="02:30:00">02.30</option>
<option value="02:45:00">02.45</option>
<option value="03:00:00">03.00</option>
</select>
     bis 
<select name="anbis" style="width:60px">
<option value="00:00:00" selected>00.00</option>
<option value="00:15:00">00.15</option>
<option value="00:30:00">00.30</option>
<option value="00:45:00">00.45</option>
<option value="01:00:00">01.00</option>
<option value="01:15:00">01.15</option>
<option value="01:30:00">01.30</option>
<option value="01:45:00">01.45</option>
<option value="02:00:00">02.00</option>
<option value="02:15:00">02.15</option>
<option value="02:30:00">02.30</option>
<option value="02:45:00">02.45</option>
<option value="03:00:00">03.00</option>
</select>

</form>

</body>
</html>
    Vielen Dank schon mal im Voraus, wenn mir hierbei jemand weiter helfen kann.

    Grüße
    PsychoEagle
    Stichworte: -
  • #2
    auf den schnellen Blick schon mal folgendes:
    statt
    Code:
    setZeitAb(this.form)
    verwende
    Code:
    setZeitAb(this)
    das liefert das select als Objekt.

    Kommentar

    • #3
      Problem bei dir ist das du den sellectedIndex setzen willst aber dann doch das value dafür benutzt vond aher kommt dann eine böse Fehlermeldung

      Fehler: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLSelectElement.selectedIndex]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: file:///************* :: setDatum :: line 15" data: no]
      Ich denke das dürfte als Erklärung reichen denn du bist ja bewandert

      Kommentar

      • #4
        (ich liebe das Smily )

        Kopf -> Tisch ... ich hät mir des mal näher durchn Kopf gehen lassen sollen danke für den Tipp Megastar.

        Lösung:

        Code:
        <script type="text/javascript">
  function setDatum(form) {
    var tag   = form.abday.selectedIndex;
    var monat = form.abmonth.selectedIndex;
    var jahr  = form.abyear.selectedIndex;
    form.anday.selectedIndex = tag;
    form.anmonth.selectedIndex = monat;
    form.anyear.selectedIndex = jahr;
  }
  function setZeitAb(form) {
    var zeit = form.abvon.selectedIndex;
    form.abbis.selectedIndex = zeit;
  }
  function setZeitAn(form) {
    var zeit = form.anvon.selectedIndex;
    form.anbis.selectedIndex = zeit;
  }
</script>
        Ich hoffe so ist das fehlerfrei zumindestens kommen keine Fehler mehr im JS Monitor

        Danke danke danke nochmal

        Gruß
        PsychoEagle

        PS:

        Kompletter Code
        Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title></title>
<script type="text/javascript">
  function setDatum(form) {
    var tag   = form.abday.selectedIndex;
    var monat = form.abmonth.selectedIndex;
    var jahr  = form.abyear.selectedIndex;
    form.anday.selectedIndex = tag;
    form.anmonth.selectedIndex = monat;
    form.anyear.selectedIndex = jahr;
  }
  function setZeitAb(form) {
    var zeit = form.abvon.selectedIndex;
    form.abbis.selectedIndex = zeit;
  }
  function setZeitAn(form) {
    var zeit = form.anvon.selectedIndex;
    form.anbis.selectedIndex = zeit;
  }
</script>
</head>

<body>

<form action="test.html" method="post" name="fracht">

<select name="abday" style="width:42px;"tabindex="9" onChange="setDatum(this.form)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23" selected>23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="abmonth" style="width:42px;"tabindex="10" onChange="setDatum(this.form)">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>

<select name="abyear" style="width:58px;"tabindex="11" onChange="setDatum(this.form)">
<option value="2007" selected>2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>

       

<select name="abvon" style="width:60px"tabindex="12" onChange="setZeitAb(this.form)">
<option value="00:00:00" selected>00.00</option>
<option value="00:15:00">00.15</option>
<option value="00:30:00">00.30</option>
<option value="00:45:00">00.45</option>
<option value="01:00:00">01.00</option>
<option value="01:15:00">01.15</option>
<option value="01:30:00">01.30</option>
<option value="01:45:00">01.45</option>
<option value="02:00:00">02.00</option>
<option value="02:15:00">02.15</option>
<option value="02:30:00">02.30</option>
<option value="02:45:00">02.45</option>
<option value="03:00:00">03.00</option>
</select>
     bis
<select name="abbis" style="width:60px">
<option value="00:00:00" selected>00.00</option>
<option value="00:15:00">00.15</option>
<option value="00:30:00">00.30</option>
<option value="00:45:00">00.45</option>
<option value="01:00:00">01.00</option>
<option value="01:15:00">01.15</option>
<option value="01:30:00">01.30</option>
<option value="01:45:00">01.45</option>
<option value="02:00:00">02.00</option>
<option value="02:15:00">02.15</option>
<option value="02:30:00">02.30</option>
<option value="02:45:00">02.45</option>
<option value="03:00:00">03.00</option>
</select>






<select name="anday" style="width:42px;"tabindex="22">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23" selected>23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="anmonth" style="width:42px;"tabindex="23">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>

<select name="anyear" style="width:58px;"tabindex="24">
<option value="2007" selected>2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>

       

<select name="anvon" style="width:60px"tabindex="25" onChange="setZeitAn(this.form)">
<option value="00:00:00" selected>00.00</option>
<option value="00:15:00">00.15</option>
<option value="00:30:00">00.30</option>
<option value="00:45:00">00.45</option>
<option value="01:00:00">01.00</option>
<option value="01:15:00">01.15</option>
<option value="01:30:00">01.30</option>
<option value="01:45:00">01.45</option>
<option value="02:00:00">02.00</option>
<option value="02:15:00">02.15</option>
<option value="02:30:00">02.30</option>
<option value="02:45:00">02.45</option>
<option value="03:00:00">03.00</option>
</select>
     bis
<select name="anbis" style="width:60px">
<option value="00:00:00" selected>00.00</option>
<option value="00:15:00">00.15</option>
<option value="00:30:00">00.30</option>
<option value="00:45:00">00.45</option>
<option value="01:00:00">01.00</option>
<option value="01:15:00">01.15</option>
<option value="01:30:00">01.30</option>
<option value="01:45:00">01.45</option>
<option value="02:00:00">02.00</option>
<option value="02:15:00">02.15</option>
<option value="02:30:00">02.30</option>
<option value="02:45:00">02.45</option>
<option value="03:00:00">03.00</option>
</select>

</form>

</body>
</html>

        Kommentar

        • #5
          Habe ich kürzlich erst im Tutorial-Board einen Vorschlag gepostet:
          http://www.phpfriend.de/forum/ftopic61315.html

          Kommentar

          • #6
            Zitat von Zergling
            Habe ich kürzlich erst im Tutorial-Board einen Vorschlag gepostet:
            http://www.phpfriend.de/forum/ftopic61315.html
            Aber das ist ja was anderes. Ich möchte ja kein Dropdown in Abhängigkeit eines anderen mit Daten füllen, sondern ein Dropdownwert so auswählen, wie es im ersteren ausgewählt wurde. Die Daten in dem DD Feld sind statisch.

            Jez wollte ich das ganze noch als funktion umbauen, welche ich variabel auf verschiedene Dropdowns anwenden kann. Also nicht mehr wie jetzt 3 funktionen sondern im Endeffekt nur noch eine. Das ganze mag aber nicht wie ich mag

            Der JS Monitor spuckt folgenden Fehler aus:
            Code:
            Fehler: form.vonfeld has no properties
Quelldatei: file:///C:/Dokumente%20und%20Einstellungen/a.holzknecht/Desktop/maintest.html
Zeile: 9
            Aber vonfeld besitzt einen Wert, oder hab ich es falsch in der Funktion verwendet? Sagt der Fehler was anderes aus? Sieht jemand den Fehler, welchen den Fehler auslöst?

            Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title></title>
<script type="text/javascript">
  function changeSelected(form,vonfeld,nachfeld) {
    var wert = form.vonfeld.selectedIndex;
    form.nachfeld.selectedIndex = wert;
  }
</script>
</head>

<body>

<form action="test.html" method="post" name="fracht">

<select name="abday" onChange="changeSelected(this.form,'abday','anday')">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9" selected>23</option>
<option value="10">10</option>
</select>

  

<select name="anday">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9" selected>23</option>
<option value="10">10</option>
</select>

</form>

</body>
</html>
            Danke nochmal fürs drüber schaun.

            Grüße

            Kommentar

            • #7
              vonfeld ist ein String, den kannst du nicht einfach auf form anhängen.
              form.elements[vonfeld] ginge schon eher.

              Kommentar

              • #8
                Zitat von Zergling
                vonfeld ist ein String, den kannst du nicht einfach auf form anhängen.
                form.elements[vonfeld] ginge schon eher.
                Du bistn Schatz danke. Da hät ich noch ewig gebraucht. Ich war schon bei GetByElements oder so ...



                Gruß

                Kommentar

                • #9
                  versuch mal so:

                  Code:
                  <script type="text/javascript">
  function changeSelected(formular,vonfeld,nachfeld) {
    document[formular][nachfeld].selectedIndex = vonfeld;
  }
</script>

...

<select name="abday" onChange="changeSelected(this.form.name,this.selectedIndex,'anday')">

                  Kommentar

                  • #10
                    Zitat von M3g4Star
                    versuch mal so:

                    Code:
                    <script type="text/javascript">
  function changeSelected(formular,vonfeld,nachfeld) {
    document[formular][nachfeld].selectedIndex = vonfeld;
  }
</script>

...

<select name="abday" onChange="changeSelected(this.form.name,this.selectedIndex,'anday')">
                    Habs nun so -->

                    Code:
                    <script type="text/javascript">
  function changeSelected(form,x,y) {
    form.elements[y].selectedIndex = form.elements[x].selectedIndex;
  }
</script>

...

<select name="abday" onChange="changeSelected(this.form,'abday','anday')">...</select>

<select name="anday">...</select>
                    Edit:

                    Aber vielen Dank

                    Danke an euch beide. Sehr geholfen und ich hab mal wieder was gelernt

                    Grüße und schönes Wochenende

                    MFG
                    PsychoEagle

                    Kommentar

                    • #11
                      ich kapier dieses this.form nicht. this übergibt doch genau das objekt des selects, da kannst du dir doch einiges sparen:
                      Code:
                      <script type="text/javascript">

  function changeSelected(element,target) {
    obj = document.getElementsByName(target)[0];
    obj.selectedIndex = element.selectedIndex;
  }
</script>

...

<select name="abday" onChange="changeSelected(this , 'anday')">...</select>

<select name="anday">...</select>

                      Kommentar

                      Vorherige Weiter
                      Lädt...
                      X