nicht angemeldet
Ausblenden mittels style="display: none;" funktioniert nicht
hallo an euch,
hab da wieder ein kleines problem.und zwar geht es um das style="display: none;"
ich versuche mittels einer "was-wäre-wenn-abfrage" einige sachen ein- bzw. auszublenden.
das ganze ist eine *.hta-datei.
vorab stelle ich das html-gerüst da bzw. den dazugehörigen script-auszug:
html-gerüst:
<table id="Tabelle1">
<tr height=5>
<td colspan=12></td>
</tr>
<tr height=75>
<td width=10></td>
<td colspan=10 width=1020><h2><center>Stücklistenscript</h2><h5>für SINGLE AISLE & LONG RANGE</h5></center></td>
<td width=10></td>
</tr>
<tr height=5>
<td colspan=12></td>
</tr>
<tr height=30>
<td width=10></td>
<td width=80 align="center">Flugzeugtyp:</td>
<td width=128><label id="FLTLabel" for="FLT"></label>
<select id="FLT" name="FLT">
<option value="--">Bitte wählen:</option>
<option value="SA1">A318</option>
<option value="SA2">A319</option>
<option value="SA3">A320</option>
<option value="SA4">A321</option>
<option value="LR1">A330-200</option>
<option value="LR2">A330-200 Frachter</option>
<option value="LR3">A330-300</option>
<option value="LR4">A340</option>
<option value="LR5">A340-500</option>
<option value="LR6">A340-600</option>
</select></td>
<td width=247 id="Flugzeugtyp"></td>
<td width=55 align="center">Sektion:</td>
<td width=95><label id="SektionLabel" for="Sektion"></label>
<select id="Sektion" name="Sektion" size="1" maxlength="7">
<option value="--">Bitte wählen:</option>
</select></td>
<td width=105 id="Sek"></td>
<td width=55 align="center">Bereich:</td>
<td width=95><label id="SektionBereich1" for="Bereich1"></label>
<select id="Bereich1" name="Bereich1">
<option value="--">Bitte wählen:</option>
</select></td>
<td width=40>
<input type="text" id="Text1" name="Text1" value="" size="1" maxlength="3"></input></td>
<td width=100 id="Fehlerausgabe1" align="center"></td>
<td width=10></td>
</tr>
das hier ist die besagte stelle um die es sich bei meinem problem dreht.
<tr height=30>
<td width=10></td>
<td colspan=5 rowspan=6 id="Prüfung" valign="bottom"></td>
<td width=100></td>
<td width=55></td>
<td width=95><label id="SektionBereich2" for="Bereich2"></label>
<select id="Bereich2" name="Bereich2" style="display: none;">
<option value="--">Bitte wählen:</option>
</select></td>
<td width=40>
<input type="text" id="Text2" name="Text2" value="" size="1" maxlength="3" style="display: none;"></input></td>
<td width=100 id="Fehlerausgabe2"></td>
<td width=10></td>
</tr>
<tr height=30>
<td width=10></td>
<td width=100></td>
<td width=55></td>
<td width=95><label id="SektionBereich3" for="Bereich3"></label>
<select id="Bereich3" name="Bereich3" style="display: none;">
<option value="--">Bitte wählen:</option>
</select></td>
<td width=40>
<input type="text" id="Text3" name="Text3" value="" size="1" maxlength="3" style="display: none;"></input></td>
<td width=100 id="Fehlerausgabe3"></td>
<td width=10></td>
</tr>
und hier wie es auf dem bildschirm aussieht:
ich habe bewusst die rahmen für die einzelnen spalten dringelassen damit man den unterschied besser erkennt.
nun erfolg der dazugehörige script:
function init_Basis()
{
var Selektierung = function()
{
if( document.Auswahl.Bereich1.options[document.Auswahl.Bereich1.selectedIndex].text == "Q" || document.Auswahl.Bereich1.options[document.Auswahl.Bereich1.selectedIndex].text == "T4L" || document.Auswahl.Bereich1.options[document.Auswahl.Bereich1.selectedIndex].text == "T4R" || document.Auswahl.Bereich1.options[document.Auswahl.Bereich1.selectedIndex].text == "T3L" || document.Auswahl.Bereich1.options[document.Auswahl.Bereich1.selectedIndex].text == "T3R" )
{
var Tür = "Tür"
};
if( Tür == "Tür" )
{
document.getElementById( "Bereich2" ).style.display = "inline";
document.getElementById( "Text2" ).style.display = "inline";
document.getElementById( "Bereich3" ).style.display = "none";
document.getElementById( "Text3" ).style.display = "none";
};
if( Tür != "Tür" )
{
document.getElementById( "Bereich2" ).style.display = "none";
document.getElementById( "Text2" ).style.display = "none";
document.getElementById( "Bereich3" ).style.display = "none";
document.getElementById( "Text3" ).style.display = "none";
};
};
document.getElementById( "FLT" ).onclick = Selektierung;
document.getElementById( "Sektion" ).onclick = Selektierung;
document.getElementById( "Bereich1" ).onclick = Selektierung;
document.getElementById( "Bereich2" ).onclick = Selektierung;
document.getElementById( "Bereich3" ).onclick = Selektierung;
return;
};
wenn ich nun also eines der bedingungen erfülle,wie bereich=Q dann soll er die nächste zelle einblenden.siehe unten:
sobald ich aber nun was an der auswahlliste ändere,wie z.b. ein anderen flugzeugtyp oder einen anderen bereich/sektion dann wird zwar die zelle ausgeblendet (das sehe ich daran das der rahmen wegfällt) aber diese <select><option>...</option></select> bleibt vorhanden also sichtbar (wenn ich eine auswahl anklicke (z.b. änderung des flugzeugtypen),wird der zusätzliche bereich (zelle) ausgeblendet,wenn ich dann zusätzlich aber einen bereich auswähle,wird diese <select><option>...</option></select> wieder sichtbar,obwohl rahmen wegfiel):
wo ist nun mein fehler?
muss dazu sagen,auf dem heimischen pc klappt das wunderbar,da kann ich rumklicken wie ich will,da funktioniert es.nur auf dem pc von der arbeit nicht.liegt es vllt daran?oder erkennt ihr einen fehler?
ps:habe bewusst mit bildern gearbeitet um euch zu veranschaulichen was genau ich meine.hoffe es verdeutlicht mein problem.
lg romero
-
habe schon versucht,dieses
style="display: none;"bei dem label reinzuschreiben,also so:<label id="SektionBereich2" for="Bereich2" style="display: none;"></label>der effekt war der selbe,sprich: ging auch nicht.
möchte nur die zelle mit inhalt ausblenden.
-
ich hab die lösung:
mittels style="visibility:hidden" bzw. getElementById( "irgendwas" ).style.visibility = "visible" bzw. "hidden" klappt das.
aber warum klappt das nicht mit display="none" bzw. "inline"?
-
ich hab die lösung:
mittels style="visibility:hidden" bzw. getElementById( "irgendwas" ).style.visibility = "visible" bzw. "hidden" klappt das.
aber warum klappt das nicht mit display="none" bzw. "inline"?
3 Generelle antworten:
- Du hast dich verschrieben
- Es gibt bereits ein style Attribut auf dem HMTL Tag. Dann wird das erste genommen und das zweite ignoriert.
- ein Javascript ist schneller und macht das display: none wieder kaputt.
Bei dir wäre Punkt 3 am wahrscheinlichsten.
Gruß
der sichtbare
T-Rex-
3 Generelle antworten:
- Du hast dich verschrieben
wo genau jetzt :)
- Es gibt bereits ein style Attribut auf dem HMTL Tag. Dann wird das erste genommen und das zweite ignoriert.
leider nein,da war nur eins,siehe scriptauszug
- ein Javascript ist schneller und macht das display: none wieder kaputt.
Bei dir wäre Punkt 3 am wahrscheinlichsten.
wie soll ich das verstehen?javascript ist schneller?und macht das display: none wieder kaputt?wo und wie soll das gehen?
lg romero
-
-