El servidor tiene retraso mental. Reemplace la parte del código que contiene la selección de ancho completo con caracteres de medio ancho.
Código de programa
<script type="text/javascript">
var childCreate=falso;
función Compensación(e)
//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
}
}
carga de funciónｓｅｅｃｔ(obj){
//Paso uno: obtener la ubicación de la selección
var desplazamiento=Desplazamiento(obj);
//Paso 2: Ocultar la selección real
obj.style.display="ninguno";
//Paso 3: crear un div virtual para reemplazar la selección
var iDiv = document.createElement("div");
iDiv.id="ｓｌｅｃｔ" + nombre.obj;
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( iDiv.style.border="1px sólido #ccc";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
documento.body.appendChild(iDiv);
//Paso 4: Mostrar las opciones predeterminadas en seleccionar
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//Paso 5: simular el clic del mouse
iDiv.onmouseover=function(){//movimientos del mouse
iDiv.estilo.fondo="url( }
iDiv.onmouseout=function(){//el mouse se aleja
iDiv.estilo.fondo="url( }
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="ｓｏｅｃｔ" + nombre.obj;
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 cuán hermoso sea el formulario, 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;
}
}
}
}
}
</script>
<tipo de estilo="texto/css">
ｓｌｅｃｔ{ancho:200px;alto:20px;}
</estilo>
</cabeza>
<cuerpo>
<h1>Utilice javascript para simular la selección y lograr efectos de embellecimiento</h1>
<nombre del formulario="f">
<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>
<option value="13">Zhejiang</option>
<option value="13">Pekín</option>
<option value="13">Shanghái</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
</seleccionar>
</formulario>
<tipo de script="texto/javascript">
cargarｓｌｅｃｔ(documento.f.provincia);
</script>