Функциональные требования
1. Вызов должен быть удобным. После выполнения он должен выглядеть так:
function loadSelect(selectobj){.
//Передаем выбранный объект, чтобы украсить его стиль
}
2. Не изменяйте исходные элементы формы и не уничтожайте код страницы формы:
<form name="f" onsubmit="getResult();">
<набор полей>
<legend>Регистрация пользователя</legend>
<дел>
<label for="username">Аккаунт</label>
<input type="text" id="имя пользователя" name="имя пользователя" />
</div>
<дел>
<label for="pwd">Пароль</label>
<input type="password" name="pwd" id="pwd" />
</div>
<дел>
<label for="province">Провинция</label>
<select id="провинция" name="провинция">
<option value="10">Цзянси</option>
<option value="11">Фуцзянь</option>
<option value="12">Гуандун</option>
<option value="13">Чжэцзян</option>
</выбрать>
</div>
</fieldset>
<input type="submit" value="Submit" name="btnSub" />
</форма>
для реализации идеи
: скрыть выделение в форме.
Почему? Все просто, потому что этот парень слишком упрям и не может получить то, что вы хотите, с помощью CSS. Так что убей это.
Шаг 2. Используйте скрипт, чтобы найти абсолютное положение тега выбора на веб-странице.
Мы используем теги DIV, чтобы сделать фальшивый и более красивый на этой позиции, который будет служить его заменой.
Шаг 3. Используйте скрипт для чтения значения в теге выбора.
Несмотря на то, что он скрыт, мы все равно можем использовать его параметры, то есть использовать их все.
Шаг 4: Когда пользователь нажимает на аватар тега выбора, которым является элемент div. Мы используем еще один элемент div, чтобы разместить его под предыдущим элементом. Это замена параметров.
Вот примерно так, давайте реализовывать это шаг за шагом!
Подготовка
1. Подумайте, как вы хотите украсить подборку, и подготовьте соответствующие картинки. Я подготовил два небольших изображения: стрелка раскрывающегося списка 1 и стрелка раскрывающегося списка 2. 1 — стиль по умолчанию, а 2 — стиль при наведении мыши.
2. Напишите общую страницу отправки формы, например, показанную ниже. Обратите внимание: я определил базовый стиль CSS для выбора, добавил код для вызова js-файла в заголовке и скрипт для вызова функции в теле.
Напишите JavaScript
<script type="text/javascript" src="select.js"></script>
Создайте новый js-файл и сохраните его как select.js. Остальную работу мы завершим в этом js.
Имя функции: loadSelect(obj);
Параметры: Выбор
функций, связанных с объектом:
//Получить абсолютное положение метки
{
вар т = e.offsetTop;
вар л = e.offsetLeft;
вар ш = e.offsetWidth;
вар h = e.offsetHeight-2;
в то время как (е = e.offsetParent)
{
т+=e.offsetTop;
л+=e.offsetLeft;
}
возвращаться {
верх :т,
слева: л,
ширина: ш,
высота: ч
}
}
Шаг первый: запишите абсолютную позицию выделения. Через некоторое время подошел запасной, и я понял, где мне следует стоять.
вар смещение = Смещение (объект);
//Объясните здесь, что Offset — это функция, используемая для получения абсолютного положения объекта. Написано вне функции loadSelect(). Он имеет четыре атрибута: сверху/слева/ширины/высоты.
Шаг 2: Скройте выделение.
obj.style.display="нет";
Шаг 3. Используйте виртуальный div для замены select
var iDiv = document.createElement("div");
iDiv.id="selectof" + 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(icon_select.gif) без повтора, вправо 4 пикселя";
iDiv.style.border="1px сплошной #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
Шаг 4: Присвойте ему невыбранное значение исходного выбора.
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
Шаг 5: Добавьте к аватару стиль наведения курсора мыши.
iDiv.onmouseover=function(){//движение мыши
iDiv.style.background="url(icon_select_focus.gif) без повтора, вправо 4 пикселя";
}
iDiv.onmouseout=function(){//мышь уходит
iDiv.style.background="url(icon_select.gif) без повтора, вправо 4 пикселя";
}
Шаг 6: Добавьте события щелчка мыши.
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="selectchild" + 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(){
//Сделайте две вещи: во-первых, сохраните выбор пользователя в исходном теге select, иначе, каким бы красивым он ни был, значение select не будет получено после отправки формы.
obj.options.length = 0;
obj.options[0]=новый вариант(this.innerHTML,this.id);
//При этом закрываем раскрывающийся список.
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate = ложь;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
Последний немного сложнее. Позвольте мне объяснить еще раз. Прежде чем мы сделаем этот шаг, внешний вид выбора уже известен. Следующий шаг — добавить элемент управления, имитирующий раскрывающийся список, который появляется после выбора. нажимается. Мы можем извлечь параметры тега select с помощью JavaScript и написать это так:
<div>
<ул>
<li>имя_опции</li>
<li>имя_опции</li>
<li>имя_опции</li>
</ul>
</div>
Вот и все. Есть еще некоторые недочеты. Если есть время, можно сложить их вместе!