Hi,
ich möchte gerne eine Liste von Items erstellen, in den man eins auswählen kann und das bleibt dann auch ausgewählt SingleSelect).
Eine Liste ist eine Liste, und wenn man von einer Auswahl nur ein Item erlauben will, bleiben Radio-Buttons und deine select-Box.
Die Lösung mit der select-Box ist klar, deswegen gehe ich nicht drauf ein. Die Liste mit Radio-Buttons ist aber auch nicht viel schwerer, schau, dir z.B. mal das Beispiel an:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>TTT</title>
<style type='text/css'>
[code lang=css]ul input {
display: none;
}
input:checked ~ label {
border: 1px solid red;
}
</style>
</head>
<body>
<form method='POST' action=''>
<ul>
<li><input type='radio' value='1' id='item-1' name='ig' /><label for='item-1'>1</label></li>
<li><input type='radio' value='2' id='item-2' name='ig'/><label for='item-2'>2</label></li>
<li><input type='radio' value='3' id='item-3' name='ig'/><label for='item-3'>3</label></li>
<li><input type='radio' value='4' id='item-4' name='ig'/><label for='item-4'>4</label></li>
<li><input type='radio' value='5' id='item-5' name='ig'/><label for='item-5'>5</label></li>
</ul>
</form>
</body>
[/code]
Per CSS blendest du den Radio-Button aus, und mit dem Sibling-Selector kannst du das Label noch umformatieren. Da der Radio-Button nicht mehr da ist, kannst du nur noch das Label zu auswählen nutzen. Dein JavaScript kannst du nun z.B. mit einem onchange auf die radio-Buttons aktivieren.
Ohne es gerade testen zu können, solltest du hier nicht die IE-"Probleme" mit change/focus haben, da der radio-Button keinen focus haben kann.
Bis die Tage,
Matti