| 

.NET C# Java Javascript Exception

2
Ich habe eine Auswahlliste mit Mehrfachoption in HTML erstellt und möchte nun, dass sich bei der Anwahl eines Punktes der Text farblich verändert. Dies soll der besseren Orientierung dienen. Brauche ich dazu Javaskript oder kann ich einfach dem Listenelement einen anderen Style zuweisen wenn es aktiviert ist? Das wäre mit lieber, weil ich mich mit Javaskript nicht auskenne.
News:
04.02.2012
scottydog12 1 1
1 Antwort
0
Hallo Scotty

Eigentlich könnte das recht bequem mittels CSS und Pseudoselektoren sowie Attributselektoren gehen. Das sähe dann etwa so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Auswahllisten beliebteste Motorräder</title><style>

option {
background:#f00;
font-weight: bold;
color:#00f;
}
option[selected=selected] {
background:#0f0;
font-weight: normal;
color:#f00;
}
option:checked {
background:#00f;
font-size:160%;
color:#000;
}
</style>

</head>
<body>
<h1>W&auml;hlen Sie Ihren Favoriten!</h1>
<form action="select.htm" >
<p>
<select name="top5" size="5" multiple="multiple">
<option selected="selected">Rennmaschine</option>
<option>Tourer</option>
<option>Sportler</option>
<option>Enduro</option>
<option>Chopper</option>
</select>
</p>
</form>
</body>
</html>


Du kannst das ja mal ausprobieren. Firefox macht das zumindest teilweise.
Chrome und IE garnicht.

In jedem Fall werden aber zumindest Teile des Styles vom Browser überschrieben.

Bleibt also nur JS:

<html>
<head>
<title>Auswahllisten beliebteste Motorräder</title><style>

option {
background:#f00;
font-weight: bold;
color:#00f;
}
option.selected {
background:#00f;
font-size:160%;
color:#000;
}
</style>

</head>
<body>
<h1>W&auml;hlen Sie Ihren Favoriten!</h1>
<form action="select.htm" >
<p>
<select name="top5" size="5" multiple="multiple" id="auswahl">
<option selected="selected">Rennmaschine</option>
<option>Tourer</option>
<option>Sportler</option>
<option>Enduro</option>
<option>Chopper</option>
</select>
</p>
</form>

<script>
$(document).ready(function() {
$("#auswahl").change(function() {
$("#auswahl option:selected").each(function(opt){
$(this).addClass("selected");
});
$("#auswahl option:not(:selected)").each(function(opt){
$(this).removeClass("selected");
});
});
});
</script>
</body>
</html>


Das Beispiel setzt jQeury voraus, das müsste also noch eingebunden werden.
Lässt sich so oder ähnlich aber auch mit anderen Libraries umsetzen

Grüße
huckepick
04.02.2012
huckepick 887 2 8

Stelle deine Web-Frage jetzt!