O estilo padrão de seleção geralmente é feio. Para garantir o estilo uniforme da página, o Select precisa ser embelezado. Embora existam muitos plug-ins embelezados, pesquisando muito, é realmente uma dor de cabeça introduzir arquivos CSS e arquivos JS longos. De fato, o princípio da implementação de Select é muito simples, é um processo de clicar para alternar a exibição, ocultar e passar valores. Eu simulei com jQuery e escrevo o estilo que você quiser, sem limitar o número.
Efeitos simples:
html:
<div> <font>› </font> <pan> Opção 1 </span> <ul> <li> Opção 1 </li> <li> Opção 1 </li> <li> Opção 2 </li> <li> Opção 3 </li> </li> </li> </div> <div> <font> <font> </font> opção <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> 3 </li> </ul> </div>
CSS:
ul {margem: 0; preenchimento: 0; estilo de lista: nenhum;}. select_box {width: 200px; Altura: 36px; borda: 1px sólido #3cf; Posição: relativa; flutuar: esquerda; Margem-direita: 50px;}. Select_box span {display: inline-Block; Largura: 200px; Altura: 36px; Curvesor: ponteiro; texto-indent: 10px;}. SElect_box .span_aa {color:#c36;}. SElect_box ul {width: 200px; Posição: Absoluto; topo: 36px; Esquerda: -1px; borda: 1px sólido #3cf; Exibir: Nenhum; Antecedentes: #fff;}. Select_box li {cursor: pointer; altura de linha: 36px; Indente de texto: 10px;}. Select_box Li: Hover {Background:#39F; cor: #fff;}. select_box font {position: absoluto; Direita: 10px; Size da fonte: 26px; Fonte-família: "Microsoft Yahei"; Cor:#3CF; Transformar: girar (90deg);}JS:
$ (function () {var s_title = $ (". Select_box span"); var s_select = $ (". select_box li"); s_title.click (function (e) {$ (this) .addclass ("span_aa"); $ (this). s_select.Click (function () {var s_text = $ (this) .html (); var s_title_2 = $ (this) .parent ('ul'). prev ("span"); s_title_2.html (s_text) .Removeclass ("span_aa"); $ (documento) .Click (function () {s_title.removeclass ("span_aa"); $ (". Select_box ul"). hide ();});Download do código-fonte: JS Selecione o download de embelezamento da caixa suspensa
Se você ainda deseja aprender em profundidade, clique no resumo do efeito de caixa suspensa do jQuery e no resumo do efeito suspenso JavaScript para aprender.
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.