Сервер умственно отсталый, пожалуйста, замените часть кода, содержащую символы полной ширины, на символы половинной ширины.
Код программы
<script type="text/javascript">
вар childCreate = false;
функция Offset(e)
//Получаем абсолютную позицию метки
{
вар т = e.offsetTop;
вар л = e.offsetLeft;
вар ш = e.offsetWidth;
вар h = e.offsetHeight-2;
в то время как (е = e.offsetParent)
{
т+=e.offsetTop;
л+=e.offsetLeft;
}
возвращаться {
верх :т,
слева: л,
ширина: ш,
высота: ч
}
}
функция loadｓｅｅｃｔ(obj){
//Шаг первый: получаем местоположение выбора
вар смещение = Смещение (объект);
//Шаг 2: скрываем настоящий выбор
obj.style.display="нет";
//Шаг 3: создайте виртуальный div для замены select
var iDiv = document.createElement("div");
iDiv.id="ｓｌｅｃｔ" + obj.name;
iDiv.style.position = "абсолютный";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url( iDiv.style.border="1px Solid #ccc";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//Шаг 4: Отображение параметров по умолчанию в select
вар tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//Шаг 5: Имитация щелчка мыши
iDiv.onmouseover=function(){//движение мыши
iDiv.style.background="url( }
iDiv.onmouseout=function(){//мышь уходит
iDiv.style.background="url( }
iDiv.onclick=function(){//Щелчок мышью
if (document.getElementById("selectchild" + obj.name)){
//Определяем, создан ли div
если (childCreate){
//Определяем, открыт ли текущий раскрывающийся список. Если он открыт, закройте его. Если он закрыт, откройте его.
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate = ложь;
}еще{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate = истина;
}
}еще{
//Изначально поместите элемент div под предыдущий элемент вместо параметров.
var cDiv = document.createElement("div");
cDiv.id="ｓｏｅｃｔ" + obj.name;
cDiv.style.position = "абсолютный";
cDiv.style.width=offset.width + "px";
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.left + "px";
cDiv.style.background="#f7f7f7";
cDiv.style.border="1 пиксель, сплошное серебро";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + имя объекта;
uUl.style.listStyle="нет";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
childCreate = истина;
for (var i=0;i<obj.options.length;i++){
//Добавляем параметры из исходного тега select в li
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
for (var j=0;j<obj.options.length;j++){
//Добавляем событие мыши для тега li
liObj[j].onmouseover=function(){
this.style.background="gray";
this.style.color="белый";
}
liObj[j].onmouseout=function(){
this.style.background="белый";
this.style.color="черный";
}
liObj[j].onclick=function(){
//Сделайте две вещи: во-первых, сохраните выбор пользователя в исходном теге выбора. В противном случае, какой бы красивой ни была форма, значение выбора не будет получено после отправки формы.
obj.options.length = 0;
obj.options[0]=новый вариант(this.innerHTML,this.id);
//При этом закрываем раскрывающийся список.
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate = ложь;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
}
</скрипт>
<style type="text/css">
ｓｌｅｃｔ{ширина:200 пикселей;высота:20 пикселей;}
</стиль>
</голова>
<тело>
<h1>Используйте JavaScript для имитации выбора и достижения эффектов украшения</h1>
<имя формы="f">
<select id="провинция" name="провинция">
<option value="10">Цзянси</option>
<option value="11">Фуцзянь</option>
<option value="12">Гуандун</option>
<option value="13">Чжэцзян</option>
<option value="13">Чжэцзян</option>
<option value="13">Пекин</option>
<option value="13">Шанхай</option>
<option value="13">Чжэцзян</option>
<option value="13">Чжэцзян</option>
<option value="13">Чжэцзян</option>
<option value="13">Чжэцзян</option>
<option value="13">Чжэцзян</option>
</выбрать>
</форма>
<тип сценария="текст/javascript">
loadｓｌｅｃｔ(document.f.province);
</скрипт>