RageComics
Cadet 2nd Year
- Registriert
- Juli 2012
- Beiträge
- 31
Hallo ich hab ein Problem, nämlich habe ich per HTML&JS eine Dropdown List erstellt, die wenn man eine Option aufruft, einen Text anzeigt. Das Problem dabei ist, dass ich mt CSS einen Border darum gemacht habe. Ich habe einen sehr langen Text in einer Option, deswegen musste ich den Border dementsprechend auch verlängern, aber wenn ich dann eine Option mit kurzem Text auswähle, bleibt der Border so lang. Das sieht echt blöd aus 
. Hier mal der Code (Ich habe ihn vereinfacht und die Texte ersetzt. Nicht wundern 
):
Wäre echt nett, wenn mir jemand weiterhelfen könnte
. Hier mal der Code (Ich habe ihn vereinfacht und die Texte ersetzt. Nicht wundern ):
HTML:
<html>
<head>
<style>
.yourContentHere {
display: none;
}
.activeContent {
display: block;
}
body {
border-style: solid;
border-width: medium;
border-color: #000000;
width: 500px;
height: 660px;
margin: 0 auto;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<br />
<form name="dropdown-list">
<select>
<option value="1" selected="selected">Wähle eine Option</option>
<option value="2">kleiner text</option>
<option value="3">großer text</option>
</select>
</form>
<div id="yourDropdownChoiceContent">
<div class="yourContentHere activeContent"></div>
<div class="yourContentHere"><p>nur ein kleiner paragraph</p></div>
<div class="yourContentHere">
<p>Anfang eines gigantischen Textes ^^</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>ende</p></div>
</div>
<script>
$('select').change(function(){
var chosenOption = $('select option:selected').index()
$('.yourContentHere').removeClass('activeContent')
$('.yourContentHere').eq(chosenOption).addClass('activeContent')
});
</script>
</body>
</html>Wäre echt nett, wenn mir jemand weiterhelfen könnte
