Auswahlliste mit jQuery auslesen

[Casablanca]

Hallo Forum,

ich habe eine auswahllist in Form von:

  
<select id="date1" name="date1">  
   <option value="13.08.2014">13.08.2014</option>  
   <option value="12.08.2014">12.08.2014</option>  
   <option value="11.08.2014">11.08.2014</option>  
   <option value="10.08.2014">10.08.2014</option>  
   <option value="09.08.2014">09.08.2014</option>  
   <option value="08.08.2014">08.08.2014</option>  
   <option value="07.08.2014">07.08.2014</option>  
   <option value="06.08.2014">06.08.2014</option>  
   <option value="05.08.2014">05.08.2014</option>  
   <option value="04.08.2014">04.08.2014</option>  
   <option value="03.08.2014">03.08.2014</option>  
   <option value="02.08.2014">02.08.2014</option>  
   <option value="01.08.2014">01.08.2014</option>  
   <option value="31.07.2014">31.07.2014</option>  
   <option value="30.07.2014">30.07.2014</option>  
   <option value="29.07.2014">29.07.2014</option>  
   <option value="28.07.2014">28.07.2014</option>  
   <option value="27.07.2014">27.07.2014</option>  
   <option value="26.07.2014">26.07.2014</option>  
   <option value="25.07.2014">25.07.2014</option>  
   <option value="24.07.2014">24.07.2014</option>  
   <option value="23.07.2014">23.07.2014</option>  
   <option value="22.07.2014">22.07.2014</option>  
   <option value="21.07.2014">21.07.2014</option>  
   <option value="20.07.2014">20.07.2014</option>  
   <option value="19.07.2014">19.07.2014</option>  
</selct>  

Ich habe eine zweite Auswahlliste:

  
<select id="date2" name="date2"></selct>  

Meine Aufgabe: Wenn ein Benutzer einen Eintrag von der ersten Liste auswählt, sagen wir mal den "01.08.2014", muss ich ab dem Eintrag die sieben vorherigen Eintrage aus der Liste 1 auslesen und umgekehrt in die Liste 2 eintragen, also in dem Fall sollte die Liste 2 dann so aussehen:

  
<select id="date2" name="date2">  
   <option value="01.08.2014">07.08.2014</option>  
   <option value="02.08.2014">06.08.2014</option>  
   <option value="03.08.2014">05.08.2014</option>  
   <option value="04.08.2014">04.08.2014</option>  
   <option value="05.08.2014">03.08.2014</option>  
   <option value="06.08.2014">02.08.2014</option>  
   <option value="07.08.2014">01.08.2014</option>  
</selct>  

Wenn weniger als sieben Eintrage vorhanden sind, müssen alle Eintrage, die vor dem ausgewählten Eintrag stehen in die Liste 2 eingrtagen werden.

Wie kann man so etwas realisieren?

Danke im Voraus.

[Casablanca]

Hallo nochmals,

alternative können beide Listen von Anfang an die gleichen Einträge haben. Man kann dann nur die Eintrage unter dem ausgwählten Eintrag vom Benutzer ausgrauen(disabled).

Gruß

[1UnitedPower]

Meine Herren!

Wie kann man so etwas realisieren?

Ich kann mir nicht vorstellen, dass dabei ein intuitives User-Interface rausspringt. Beschreibe mal etwas allgemeiner, welche Eingabe vom Endnutzer verlangt wird, möglichst unabhängig von konkreten Bedienelementen.

Für Datums-Eingaben generell gibt es bessere Bedienelemente als Listen, z.B:

<input type="date">

[Casablanca]

Hi,

danke für deine Antwort.
Die Listen werden aus einer Tabelle befüllt. Ich muss dann abhängig von der Datenauswahl des benutzers, andere Informationen aus der Tabelle hearusholen und anzeigen, die zwischen zwei Daten (von - bis) liegen und bis zu sieben Tagen zurückreichen können.

Gruß

[1UnitedPower]

Meine Herren!

Ich muss dann abhängig von der Datenauswahl des benutzers, andere Informationen aus der Tabelle hearusholen und anzeigen, die zwischen zwei Daten (von - bis) liegen und bis zu sieben Tagen zurückreichen können.

Du möchtest also eine Filter-Funktionialität erstellen.

Bei deinem bisherigen Ansatz, jeweils ein Eingabefeld für Start- und Enddatum zu anzubieten, gibt es ein Problem. Die Gültigkeit des Enddatum hängt stets vom gewählten Startdatum ab. Wenn der Nutzer das Startdatum ändert, kann es passieren, dass das Enddatum plötzlich ungültig wird, dann muss der Nutzer also auch dieses Eingabefeld korrigieren.

Mein Vorschlag ist, du nimmst nur ein Eingabefeld für das Startdatum und ein zweites Eingabefeld für die Zeitspanne. Startdatum und Zeitspanne hängen nicht voneinander ab und der Nutzer kann gefahrlos ein Eingabefeld manipulieren ohne, dass es eine Auswirkung auf das zweite Eingabefeld hätte.

<dl>  
    <dt>  
        <label for="startdate">Startdatum</label>  
    </dt>  
    <dd>  
        <input id="startdate" type="date">  
    </dd>  
    <dt>  
        <label for="daterange">Zeitspanne</label>  
    </dt>  
    <dd>  
        <span>+1 Tag</span>  
        <input id="daterange" type="range" min="1" max="7">  
        <span>+7 Tage</span>  
    </dd>  
</dl>

Das Startdatum könntest du ebenfalls durch min/max-Attribute einschränken. Für die Beschriftung ließen sich bestimmt auch noch aussagekräftigere Texte finden.

Insgesamt ist das einfacher zu implementieren, zugänglicher und auch noch benutzerfreundlicher.

[Jörg Reinholz]

Mit jQuery kann ich es nicht. Mit Javascript brauche ich schnöde 16 Zeilen:

<html>  
<body>  
<script type="text/javascript">

function update_date2() {  
    var s1=document.getElementById("date1"); // erste Select-Box  
    var s2=document.getElementById("date2"); //zweite Select-Box  
    gewaehlt=s1.selectedIndex;               // welches?  
    if (-1 < gewaehlt) {                     // wenn nicht unangetastet  
      s2.innerHTML="";                       // Löschen der alten Inhalte  
      var start=gewaehlt-7;  
      var ende=gewaehlt;  
      if (start < 0) { start=0; }            // Darf nicht kleiner 0 sein...  
      for (var i=start; i<gewaehlt; i++) {  
          var option = document.createElement("option");  //Neue Option  
	  option.text =s1[i].text;                        // text  
	  option.value=s1[i].value;                       // wert  
	  s2.add(option);                                 // Option einhängen  
      }  
    }  
}

</script>  
  
<body>  
<select id="date1" name="date1" onchange="update_date2()">  
   <option value="01.08.2014">01.08.2014</option>  
   <option value="02.08.2014">02.08.2014</option>  
   <option value="03.08.2014">03.08.2014</option>  
   <option value="04.08.2014">04.08.2014</option>  
   <option value="05.08.2014">05.08.2014</option>  
   <option value="06.08.2014">06.08.2014</option>  
   <option value="07.08.2014">07.08.2014</option>  
   <option value="08.08.2014">08.08.2014</option>  
   <option value="09.08.2014">09.08.2014</option>  
   <option value="10.08.2014">10.08.2014</option>  
   <option value="11.08.2014">11.08.2014</option>  
   <option value="12.08.2014">12.08.2014</option>  
   <option value="13.08.2014">13.08.2014</option>  
   <option value="14.08.2014">14.08.2014</option>  
   <option value="15.08.2014">15.08.2014</option>  
   <option value="16.08.2014">16.08.2014</option>  
   <option value="17.08.2014">17.08.2014</option>  
   <option value="18.08.2014">18.08.2014</option>  
   <option value="19.08.2014">19.08.2014</option>  
   <option value="20.08.2014">20.08.2014</option>  
   <option value="21.08.2014">21.08.2014</option>  
   <option value="22.08.2014">22.08.2014</option>  
   <option value="23.08.2014">23.08.2014</option>  
   <option value="24.08.2014">24.08.2014</option>  
   <option value="25.08.2014">25.08.2014</option>  
   <option value="26.08.2014">26.08.2014</option>  
</select>  
  
<select id="date2" name="date2"><option>erst links wählen</option></select>  
</body>  
</html>

[Casablanca]

Hallo,

danke für deine Bemühung.
Guter Ansatz. Ich werde deinen Code morgen testen und gebe ich dir dann Bescheid.

Gruß

[Casablanca]

Hallo Jörg,

vielen Dank. Deine Lösung funktioniert ganz gut. Ich werde diese mit einer kleine Änderung übernehmen.

Gruß