Problem "Hide Dropdowns"

M

mediamacher

Mitglied
Hallo,

ich möchte Dropdowns je nach vorheriger Auswahl einblenden lassen. Wähle ich im ersten Dropdown eine Option wird aus, wird ein dazugehöriges zweites Dropdown eingeblendet. Funktioniert alles wunderbar :-)

Nein Problem ist der Default-Zustand. Rufe ich die Seite auf, werden alle Dropdowns eingeblendet, obwohl eigentlich nur eines angezeigt werden sollte. Hat jemand eine Idee?

1000 Dank :-)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>

</head>
<body>
<script type="text/javascript">
function ChangeDropdowns(value){
if(value=="Start"){
document.getElementById('B').style.display='none';
document.getElementById('A').style.display='none';
}
else if(value=="Aid"){
document.getElementById('A').style.display='block';
document.getElementById('B').style.display='none';
}
else if(value=="Bid"){
document.getElementById('B').style.display='block';
document.getElementById('A').style.display='none';
}

}
</script>
<select id="" name="" onchange="ChangeDropdowns(this.value);">
    <option selected value="Start">Bitte auswaehlen...</option>
    <option value="Aid">Auswahl A</option>
    <option value="Bid">Auswahl B</option>
</select>
<select id="B" name="B">
    <option value="">B Auswahl1</option>
    <option value="">B Auswahl2</option>
</select>

<select id="A" name="A">
    <option value="">A Auswahl1</option>
    <option value="">A Auswahl2</option>
</select>
</body>
</html>
 
Mach die anderen eben unsichtbar.

HTML: 
<select id="" name="" onchange="ChangeDropdowns(this.value);">
    <option selected value="Start">Bitte auswaehlen...</option>
    <option value="Aid">Auswahl A</option>
    <option value="Bid">Auswahl B</option>
</select>
<select id="B" name="B" style="display:none;">
    <option value="">B Auswahl1</option>
    <option value="">B Auswahl2</option>
</select>

<select id="A" name="A"  style="display:none;">
    <option value="">A Auswahl1</option>
    <option value="">A Auswahl2</option>
</select>

oder auch per css im Kopf der Datei

HTML: 
<head>
    <style type="text/css">
    #A,#B {display:none;}
    </style>
</head>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück