O servidor é retardado mental, substitua a parte do código que contém a seleção de largura total por caracteres de meia largura.
Código do programa
<script type="text/javascript">
var childCreate=false;
função Deslocamento(e)
//Obtém a posição absoluta do rótulo
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
enquanto(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
retornar {
topo: t,
esquerda: eu,
largura: w,
altura:h
}
}
carga de funçãoｓｅｅｃｔ(obj){
//Etapa um: Obtenha a localização do select
var deslocamento=Deslocamento(obj);
//Etapa 2: ocultar a seleção real
obj.style.display="nenhum";
//Etapa 3: Crie um div virtual para substituir o select
var iDiv = document.createElement("div");
iDiv.id="ｓｌｅｃｔ" + obj.nome;
iDiv.style.position = "absoluto";
iDiv.style.width=offset.largura + "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";
document.body.appendChild(iDiv);
//Etapa 4: Exibir as opções padrão no select
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValor;
//Etapa 5: Simule o clique do mouse
iDiv.onmouseover=function(){//movimentos do mouse
iDiv.style.background="url( }
iDiv.onmouseout=function(){//mouse se afasta
iDiv.style.background="url( }
iDiv.onclick=function(){//Clique do mouse
if (document.getElementById("selectchild" + obj.name)){
//Determina se a div foi criada
if (criançaCriar){
//Determina se o menu suspenso atual está aberto. Se estiver aberto, feche-o. Se estiver fechado, abra-o.
document.getElementById("selectchild" + obj.name).style.display="none";
filhoCriar=falso;
}outro{
document.getElementById("selectchild" + obj.name).style.display="";
filhoCriar=true;
}
}outro{
//Inicialmente coloque uma div abaixo da div anterior como substituto das opções.
var cDiv = document.createElement("div");
cDiv.id="ｓｏｅｃｔ" + obj.nome;
cDiv.style.position = "absoluto";
cDiv.style.width=offset.largura + "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 prata sólida";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="nenhum";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
filhoCriar=true;
for (var i=0;i<obj.options.length;i++){
//Adiciona as opções da tag select original ao 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++){
//Adiciona evento de mouse para tag li
liObj[j].onmouseover=function(){
this.style.background="cinza";
this.style.color="branco";
}
liObj[j].onmouseout=function(){
this.style.background="branco";
this.style.color="preto";
}
liObj[j].onclick=function(){
//Faça duas coisas. Uma é salvar a seleção do usuário na tag de seleção original. Caso contrário, por mais bonito que seja o formulário, o valor da seleção não será obtido após o envio do formulário.
obj.options.length=0;
obj.options[0]=nova opção(this.innerHTML,this.id);
//Ao mesmo tempo, fechamos o menu suspenso.
document.getElementById("selectchild" + obj.name).style.display="none";
filhoCriar=falso;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
}
</script>
<style type="texto/css">
ｓｌｅｃｔ{largura:200px;altura:20px;}
</estilo>
</head>
<corpo>
<h1>Use javascript para simular seleção e obter efeitos de embelezamento</h1>
<nome do formulário="f">
<select id="província" name="província">
<option value="10">Jiangxi</option>
<option value="11">Fujian</option>
<option value="12">Guangdong</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Pequim</option>
<option value="13">Xangai</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>
</selecionar>
</form>
<script type="texto/javascript">
carregarｓｌｅｃｔ(document.f.province);
</script>