вот, нацарапал на коленке...
Код:
<html>
<script>
var slct="slct";
function yo() {
var st="";
x=document.getElementById(slct);
x.multiple=true;
x.style.visibility = 'hidden';
for (var i=0;i<x.length;i++)
{
st+='<span onclick="sw('+i+',this);"';
if (x.options[i].selected==true) {
st+=' style="border:thin dotted #FF0000;"';
}
st+='>'+x.options[i].text+'</span> ';
};
document.getElementById("my").innerHTML='<div id="my">'+st+'</div>';
}
function sw(vl,cn) {
x=document.getElementById(slct);
if (x.options[vl].selected==true) {
x.options[vl].selected=false;
cn.style.border="0px";
} else {
x.options[vl].selected=true;
cn.style.border="thin dotted #FF0000";
}
}
</script>
<body onload="yo();">
<form id=frm>
<select id=slct>
<option value=1>val1
<option value=2>val2
<option value=3>val3
<option value=4>val4
</select>
<div id="my"></div>
</form>
</body>
</html>
Спасибо! Почти как надо, только осталось кое-что поправить. Вот, я загрузил скрипт со своими поправками:
Там осталось несколько косяков:
1. первое значение val1 почему-то выделяется всегда, независимо от наличия selected"
2. можно <body onload="yo();"> как-то по другому сделать, просто это будет только при добавлении новости, а функция будет на всем сайте выполняться(((
3. Хотелось бы иметь возможность более одного блока <select></select>, т.е. у меня будет блок с категориями и блок со странами. Потом может еще блок с режиссерами. Большие блоки будут сворачиваться/разворачиваться с помощью функции ShowOrHide дле по нажатию на треугольник:
4. В скрипте по ссылке выше подключен файл со стилями style.css
div.block3 {
background: #F0F0F0 url(
Для просмотра ссылки Войди или Зарегистрируйся) no-repeat 0% 0%;
line-height: 16px;
padding-left: 10px;
padding-top: 10px;
width: 389px;
height: 25px;
}
span.labeler {
border-bottom: 1px dashed;
color: #0F56A4;
cursor: pointer;
margin: 3px;
}
div.item td.l span, .invert {
background: #C4C4C4;
color: white !important;
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
}
Нужно чтобы по умолчанию все val1,val2,val3 выглядели стилем: <span class="labeler"></span>, а при выделении (вместо рамки) стиль менялся на <span class="labeler invert"></span>
Вроде как остальное норм, все работает!