Requisitos funcionais
1. A chamada deve ser conveniente Depois de feita, deve ficar assim:
function loadSelect(selectobj){.
//Passe um objeto selecionado para embelezar seu estilo
}
2. Não altere os itens originais do formulário e não destrua o código da página do formulário:
<form name="f" onsubmit="getResult();">
<conjunto de campos>
<legend>Registro de usuário</legend>
<div>
<label for="nomedeusuário">Conta</label>
<input type="text" id="nome de usuário" nome="nome de usuário" />
</div>
<div>
<label for="pwd">Senha</label>
<input type="senha" nome="pwd" id="pwd" />
</div>
<div>
<label for="province">Província</label>
<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>
</selecionar>
</div>
</fieldset>
<input type="submit" value="Submit" name="btnSub" />
</form>
para implementar a ideia
: ocultar o select no formulário.
Por que? É simples, porque esse cara é muito teimoso e não consegue o que deseja usando CSS. Então mate-o.
Etapa 2: use um script para encontrar a posição absoluta da tag select na página da web.
Usamos tags DIV para criar uma falsa e mais bonita naquela posição para servir como seu substituto.
Etapa 3: use um script para ler o valor na tag select.
Embora esteja oculto, ainda podemos usar as opções nele contidas, para que possamos pegar todas elas.
Passo 4: Quando o usuário clica no avatar da tag select, que é a div. Usamos outro div para flutuar abaixo do div anterior. Este é o substituto para opções.
É mais ou menos isso, vamos implementar passo a passo!
Preparação
1. Pense em como deseja embelezar a seleção e prepare as fotos correspondentes. Preparei duas imagens pequenas, que são a seta suspensa 1 e a seta suspensa 2. 1 é o estilo padrão e 2 é o estilo quando o mouse é movido.
2. Escreva uma página de envio de formulário comum, como a mostrada abaixo. Observe que defini o estilo CSS básico para o select, adicionei o código para chamar o arquivo js no head e adicionei o script para chamar a função no corpo.
Escreva javascript
<script type="text/javascript" src="select.js"></script>
Crie um novo arquivo js e salve-o como select.js. Concluiremos o restante do trabalho neste js.
Nome da função: loadSelect(obj);
Parâmetros: Selecione
funções relacionadas ao objeto:
//Obter 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
}
}
Etapa um: registre a posição absoluta da seleção. Depois de um tempo, o substituto apareceu e eu sabia onde deveria ficar.
var deslocamento=Deslocamento(obj);
//Explique aqui que Offset é uma função usada para obter a posição absoluta de um objeto. Escrito fora da função loadSelect(). Possui quatro atributos: topo/esquerda/largura/altura.
Passo 2: Oculte a seleção.
obj.style.display="nenhum";
Etapa 3: Use um div virtual para substituir select
var iDiv = document.createElement("div");
iDiv.id = "selecionar" + nome do objeto;
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 (icon_select.gif) sem repetição à direita 4px";
iDiv.style.border="1px sólido #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
Etapa 4: forneça o valor não selecionado da seleção original.
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
Etapa 5: adicione um estilo de passagem do mouse ao avatar.
iDiv.onmouseover=function(){//movimentos do mouse
iDiv.style.background = "url (icon_select_focus.gif) sem repetição à direita 4px";
}
iDiv.onmouseout=function(){//mouse se afasta
iDiv.style.background = "url (icon_select.gif) sem repetição à direita 4px";
}
Etapa 6: adicione eventos de clique do mouse.
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 = "selectchild" + obj.name;
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 select original, caso contrário, por mais bonito que seja, o valor do select 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;
}
}
}
}
O último é um pouco mais complicado. Deixe-me explicar novamente. Antes de realizarmos esta etapa, a aparência do select já foi revelada. é clicado. Podemos extrair as opções da tag select através de javascript e escrever assim:
<div>
<ul>
<li>opçãoNome</li>
<li>opçãoNome</li>
<li>opçãoNome</li>
</ul>
</div>
É basicamente isso. Ainda existem algumas falhas. Se você tiver tempo, poderá adicioná-las!