HTML 2x select: options von select2 sollen sich ändern wenn select1 ausgewählt wird.

Rockhound · 26. November 2015

Hallo Leute,
ich hoffe ich drücke mich verständlich aus

Ich habe zwei select-Optionen z.b. so:

HTML:

<select name="schule" id="schule">
  <option value="-" selected>Bitte wähle eine Schule aus</option>

  <option value="schule1">Schule 1</option>
  <option value="schule2">Schule 2</option>
  <option value="schule3">Schule 3</option>
</select>

<select name="zeit" id="zeit">
  <option value="-" selected>Bitte wähle zuerst eine Schule aus</option>

  <option value="schule1-zeit1">Schule 1 Zeit 1</option>
  <option value="schule1-zeit2">Schule 1 Zeit 2</option>
  <option value="schule1-zeit3">Schule 1 Zeit 3</option>
  
  <option value="schule2-zeit1">Schule 2 Zeit 1</option>
  <option value="schule2-zeit2">Schule 2 Zeit 2</option>
  
  <option value="schule3-zeit1">Schule 3 Zeit 1</option>
  <option value="schule3-zeit2">Schule 3 Zeit 2</option>
  <option value="schule3-zeit3">Schule 3 Zeit 3</option>
  <option value="schule3-zeit4">Schule 3 Zeit 4</option>
</select>

Und ich möchte das das select-Feld "zeit" nur die Zeiten von Schule X angibt wenn auch im select-Feld "schule" die Schule X gewählt wurde. Die anderen Zeiten sollten dann ausgeblendet sein. Könnt Ihr mir einen Hinweis geben wie sich das mit Javascript bzw. jQuery anstellen lassen würde?

Vielen Dank

Umbel · 26. November 2015

Auf das Select Event des ersten Select reagieren, und dann erst das zweite Select befüllen?

Rockhound · 26. November 2015

Entweder so oder man packt die zweiten <options> in verschiedene <selects> mit einem <div> drum rum und blendet es jeweils ein und aus je nachdem welche <option> im ersten <select> gemacht wurde...

also so:

HTML:

<select name="schule" id="schule">
  <option value="-" selected>Bitte wähle eine Schule aus</option>

  <option value="schule1">Schule 1</option>
  <option value="schule2">Schule 2</option>
  <option value="schule3">Schule 3</option>
</select>

<div id="schule0-zeiten">
  <select name="zeit" id="zeit">
    <option value="-" selected>Bitte wähle zuerst eine Schule aus</option>
  </select>
</div>

<div id="schule1-zeit" style="display:none">
  <select name="schule1-zeiten" id="schule1-zeiten">
    <option value="schule1-zeit1">Schule 1 Zeit 1</option>
    <option value="schule1-zeit2">Schule 1 Zeit 2</option>
    <option value="schule1-zeit3">Schule 1 Zeit 3</option>
  </select>
</div>

<div id="schule2-zeit" style="display:none">
  <select name="schule2-zeiten" id="schule2-zeiten">
    <option value="schule2-zeit1">Schule 2 Zeit 1</option>
    <option value="schule2-zeit2">Schule 2 Zeit 2</option>
  </select>
</div>

<div id="schule3-zeit" style="display:none">
  <select name="schule3-zeiten" id="schule3-zeiten">
    <option value="schule3-zeit1">Schule 3 Zeit 1</option>
    <option value="schule3-zeit2">Schule 3 Zeit 2</option>
    <option value="schule3-zeit3">Schule 3 Zeit 3</option>
    <option value="schule3-zeit4">Schule 3 Zeit 4</option>
  </select>
</div>

Und je nachdem welche Schule ich wähle wird das entsprechende <div> eingeblendet. Müsste doch relativ einfach gehen

Nur wie?

Yuuri · 26. November 2015

Rockhound schrieb:
Nur wie?

Code:

$(document).on( "change", "#schule", function()
{
	var SelectedOptionValue = $("#schule option:selected").val();
	$(this).siblings("select").fadeOut();
	$(this).siblings( '[id="' + SelectedOptionValue + '-zeit"]' ).fadeIn();
} );

So oder so ähnlich.

Rockhound · 27. November 2015

hmmm die erscheinen alle, aber die anderen verschwinden nicht.

Aber schon mal danke Yuuri. Ich teste mal rum mit meinen begrenzten Techniken.

PS:

Code:

$(document).on( "change", "#schule", function()
{
	var SelectedOptionValue = $("#schule option:selected").val();
	$(this).siblings("div").fadeOut();
	$(this).siblings( '[id="' + SelectedOptionValue + '-zeit"]' ).fadeIn();
} );

so geht es

Danke

Suche

HTML 2x select: options von select2 sollen sich ändern wenn select1 ausgewählt wird.

Rockhound

Lt. Commander

Umbel

Lt. Commander

Rockhound

Lt. Commander

Yuuri

Fleet Admiral

Rockhound

Lt. Commander

Ähnliche Themen