Auswahlliste abhängig von RadioButton ?

[Isometric]

Ist es möglich in einem Formular eine Auswahlliste abhängig vom Zustand der Radio Buttons darzustellen?

Pseudo Code in etwa:
Wenn RadioButton_1 aktiv, dann Auswahliste_1
Wenn RadioButton_2 aktiv, dann Auswahliste_2 usw.

Ich stelle mir das so vor, dass über die Radio Buttons eine Vorauswahl getroffen wird und dann kürzere Auswahllisten zur Verfügung stehen.

Beispiel: wenn ich z.B. in einem Adressformular die Länder über eine Auswahlliste eintragen will, dann wird die Liste sehr lang.

Wäre es aber möglich über eine Vorauswahl des Kontinents durch den Radiobutton zu treffen und nur die entsprechende Auswahlliste für den jeweiligen Kontinent anzuzeigen, dann wäre diese Liste auf jeden Fall kürzer, als die gesamte Länderliste.

 

[Robbyn-]

AW: Auswahlliste abhängig von RadioButton ?

Du kannst das mit javascript lösen, du erstellst beide formulare und blendest sie durch css aus (display:none) dann lägst du auf die beiden radion buttons eine javascript funktion die sagt wenn onclick auf radiobutton1 dann formular 1 display:block.

Also eigentlich ganz simple.

 

[pascal.k]

AW: Auswahlliste abhängig von RadioButton ?

Könntest z.B. mit jQuery so arbeiten:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('.laender').hide();
    $('#europa').click(function(){
        var laender = $(this).next();
        if( laender.css('display')=='none' ) laender.show();
        else laender.hide();
        return false
    });
});
-->
</script>
<a href="#" id="europa">Europa</a>
<div class="laender">
    <input type="radio" name="Deutschland" /> Deutschland<br />
    <input type="radio" name="Spanien" /> Spanien<br />
    etc.
</div>

 

[Isometric]

AW: Auswahlliste abhängig von RadioButton ?

Vielen Dank für die Antworten. Von jQuery habe ich absolut gar keine Ahnung, deswegen habe ich den Tipp von Robbyn- versucht umzusetzen.

Das mit dem Formular ausblenden bekomme ich ja noch hin. Aber wie blende ich es dann ein?

Ich bin dann zu folgender Lösung gekommen: ich definiere einen Radio Button als aktiv. Und stelle die dazu passende Liste dar. Auf Knopfdruck wird die dann umgeschaltet.

<script>
function ListeAuswahl () {
  if (document.formular.Kontinent[0].checked == true) {
    document.getElementById("land").innerHTML = "<form><select id='liste_1' size='1'><option value=''>Italien</option></select></form>";
  } else if (document.formular.Kontinent[1].checked == true) {
    document.getElementById("land").innerHTML = "<form><select id='liste_2' size='1'><option value=''>Japan</option></select></form>";
  }
}
</script>

<form name="formular" action="" method="post" \>
<input type="radio" name="Kontinent" value="Europa" checked="checked" onclick="ListeAuswahl();">Europa
<input type="radio" name="Kontinent" value="Asien" onclick="ListeAuswahl();">Asien
</form>

<div id="land"><form><select id='liste_1' size='1'><option value=''>Italien</option></select></form></div>

Hattest du das etwa so gedacht Robbyn- oder muss die JavaScript-Funktion ganz anders aussehen?

 

[pascal.k]

AW: Auswahlliste abhängig von RadioButton ?

Sorry, hatte das wohl auch etwas falsch verstanden. So gehts natürlich auch.

´<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('#laender div').hide();
    $('#kontinente input[type=radio]').click(function(){
        $('#laender div').hide();
        $('#'+$(this).val()).show();
    });
});
-->
</script>
<div id="kontinente">
<input type="radio" name="kontinent" value="europa" /> Europa<br />
<input type="radio" name="kontinent" value="asien" /> Asien<br />
</div>
<div id="laender">
    <div id="europa">
        <input type="radio" name="europa" value="Deutschland" /> Deutschland<br />
        <input type="radio" name="europa" value="Spanien" /> Spanien<br />
        etc.
    </div>
    <div id="asien">
        <input type="radio" name="asien" value="China" /> China<br />
        etc.
    </div>
</div>

EDIT: neuer Code. Im alten waren noch Fehler. Sorry!

 

[Isometric]

AW: Auswahlliste abhängig von RadioButton ?

@Pascal: das sieht auch sehr gut aus und hat den Vorteil, dass die Listen, die angezeigt werden mitten im normalen Code stehen und nicht wie bei mir in einer Funktion versteckt werden.

Wie schon erwähnt, habe ich von jQuery gar keine Ahnung ...
Kannst du mir bitte noch kurz erklären, warum am Anfang gar keine Länderauswahl sichtbar ist, bzw. wie standardmäßig z.B. die Auswahlliste für die Europaländer eingeblendet wird?

 

[pascal.k]

AW: Auswahlliste abhängig von RadioButton ?

Habe dir mal ein paar Kommentare an den Code geschrieben. Hoffe du kommst damit zurecht.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><!-- jQuery Codes einbinden -->
<script type="text/javascript">
<!--
$(document).ready(function(){ // alle Codes hier zwischen werden erst geladen, wenn die Seite fertig geladen ist
    
    // Voreinstellungen
    $('#laender div').hide(); // Blendet die alle Länder-Elemente aus
    //$('#laender div#asien').show(); // Hiermit könntest du z.B. Asien zu Beginn schon einblenden
    
    $('#kontinente input[type=radio]').click(function(){ // führt folgenden Code beim Klick auf ein radio-Button aus
        $('#laender div').hide(); // Blendet wieder alle Länder-Elemente aus
        $('#'+$(this).val()).show(); // Einblenden des Landes --> Radio value => div ID des einzublendenen Elements
        //$('#'+$(this).val()).slideDown('slow'); // Alternativ könntest du auch das hier zum Einblenden nehmen. Sieht schöner aus ;)
    });

});
-->
</script>
<div id="kontinente">
<input type="radio" name="kontinent" value="europa" /> Europa<br />
<input type="radio" name="kontinent" value="asien" /> Asien<br />
</div>
<div id="laender">
    <div id="europa">
        <input type="radio" name="europa" value="Deutschland" /> Deutschland<br />
        <input type="radio" name="europa" value="Spanien" /> Spanien<br />
        etc.
    </div>
    <div id="asien">
        <input type="radio" name="asien" value="China" /> China<br />
        etc.
    </div>
</div>

 

[Isometric]

AW: Auswahlliste abhängig von RadioButton ?

Okay, vielen Dank für die ausführlichen Infos

ich werde jetzt mal dran arbeiten und versuchen diese Funktion in den kompletten Code einzubauen.

Der Codeschnipsel funktioniert als Ansatz aber schon mal perfekt :lol: