Requisitos funcionales
1. La llamada debe ser conveniente. Una vez realizada, debería verse así:
function loadSelect(selectobj){.
//Pasar un objeto seleccionado para embellecer su estilo
}
2. No cambie los elementos del formulario original y no destruya el código de la página del formulario:
<form name="f" onsubmit="getResult();">
<conjunto de campos>
<legend>Registro de usuario</legend>
<div>
<label for="nombre de usuario">Cuenta</label>
<tipo de entrada="texto" id="nombre de usuario" nombre="nombre de usuario" />
</div>
<div>
<label for="pwd">Contraseña</label>
<tipo de entrada="contraseña" nombre="contraseña" id="contraseña" />
</div>
<div>
<label for="provincia">Provincia</label>
<seleccione id="provincia" nombre="provincia">
<opción valor="10">Jiangxi</opción>
<option value="11">Fujiano</option>
<option value="12">Guangdong</option>
<option value="13">Zhejiang</option>
</seleccionar>
</div>
</conjunto de campos>
<tipo de entrada="enviar" valor="Enviar" nombre="btnSub" />
</formulario>
para implementar la idea
: ocultar la selección en el formulario.
¿Por qué? Es simple, porque este tipo es demasiado terco y no puede obtener lo que quiere usando CSS. Así que mátalo.
Paso 2: utilice una secuencia de comandos para encontrar la posición absoluta de la etiqueta de selección en la página web.
Usamos etiquetas DIV para crear una falsa y más atractiva en esa posición para que sirva como su sustituto.
Paso 3: utilice un script para leer el valor en la etiqueta de selección.
Aunque está oculto, aún podemos usar las opciones que contiene, por lo que podemos tomarlas todas.
Paso 4: Cuando el usuario hace clic en el avatar de la etiqueta seleccionada, que es el div. Usamos otro div para flotar debajo del div anterior. Este es el sustituto de las opciones.
Eso es más o menos, ¡implementémoslo paso a paso!
Preparación
1. Piensa en cómo quieres embellecer la selección y prepara los dibujos correspondientes. Preparé dos imágenes pequeñas, que son la flecha desplegable 1 y la flecha desplegable 2. 1 es el estilo predeterminado y 2 es el estilo cuando se mueve el mouse.
2. Escriba una página de envío de formulario común, como la siguiente. Tenga en cuenta que definí el estilo CSS básico para la selección, agregué el código para llamar al archivo js en el encabezado y agregué el script para llamar a la función en el cuerpo.
Escribe javascript
<script type="text/javascript" src="select.js"></script>
Cree un nuevo archivo js y guárdelo como select.js. Completaremos el resto del trabajo en este js.
Nombre de la función: loadSelect(obj);
Parámetros: seleccionar
funciones relacionadas con el objeto:
// Obtener la posición absoluta de la etiqueta
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
mientras(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetIzquierda;
}
devolver {
arriba :t,
izquierda: yo,
ancho: w,
altura: h
}
}
Paso uno: registre la posición absoluta de la selección. Después de un rato, apareció el sustituto y supe dónde debía estar.
var desplazamiento=Desplazamiento(obj);
//Explique aquí que Offset es una función que se utiliza para obtener la posición absoluta de un objeto. Escrito fuera de la función loadSelect(). Tiene cuatro atributos: arriba/izquierda/ancho/alto.
Paso 2: oculta la selección.
obj.style.display="ninguno";
Paso 3: use un div virtual para reemplazar select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.nombre;
iDiv.style.position = "absoluto";
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) sin repetición a la derecha 4px";
iDiv.style.border="1px sólido #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
documento.body.appendChild(iDiv);
Paso 4: Dale el valor no seleccionado de la selección original.
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
Paso 5: agrega un estilo de mouseover al avatar.
iDiv.onmouseover=function(){//movimientos del mouse
iDiv.style.background="url(icon_select_focus.gif) sin repetición a la derecha 4px";
}
iDiv.onmouseout=function(){//el mouse se aleja
iDiv.style.background="url(icon_select.gif) sin repetición a la derecha 4px";
}
Paso 6: agregue eventos de clic del mouse clave.
iDiv.onclick=function(){//Clic del ratón
if (document.getElementById("selectchild" + obj.name)){
//Determinar si se ha creado el div
si (niñoCrear){
//Determine si el menú desplegable actual está abierto. Si está abierto, ciérrelo. Si está cerrado, ábrelo.
document.getElementById("selectchild"+ obj.name).style.display="none";
childCreate=falso;
}demás{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate=verdadero;
}
}demás{
//Inicialmente coloque un div debajo del div anterior como sustituto de las opciones.
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.nombre;
cDiv.style.position = "absoluto";
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="1px plata maciza";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.nombre;
uUl.style.listStyle="ninguno";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
documento.body.appendChild(cDiv);
childCreate=verdadero;
para (var i=0;i<obj.options.length;i++){
//Agrega las opciones en la etiqueta de selección original a li
var lLi=document.createElement("li");
lLi.id=obj.opciones[i].valor;
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");
para (var j=0;j<obj.options.length;j++){
//Añadir evento de ratón para la etiqueta li
liObj[j].onmouseover=función(){
this.style.background="gris";
this.style.color="blanco";
}
liObj[j].onmouseout=función(){
this.style.background="blanco";
this.style.color="negro";
}
liObj[j].onclick=función(){
// Haga dos cosas. Una es guardar la selección del usuario en la etiqueta de selección original. De lo contrario, no importa lo hermoso que sea, el valor de la selección no se obtendrá después de enviar el formulario.
obj.opciones.longitud=0;
obj.options[0]=nueva opción(this.innerHTML,this.id);
//Al mismo tiempo cerramos el desplegable.
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=falso;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
El último es un poco más complicado. Déjame explicarte nuevamente. Antes de realizar este paso, la apariencia de la selección ya ha sido revelada. El siguiente paso es agregar un div para imitar la opción desplegable que aparece después de la selección. se hace clic. Podemos extraer las opciones de la etiqueta select mediante javascript y escribirlo así:
<div>
<ul>
<li>Nombredeopción</li>
<li>Nombredeopción</li>
<li>Nombredeopción</li>
</ul>
</div>
Básicamente eso es todo. Todavía hay algunos defectos. Si tienes tiempo, ¡puedes sumarlos!