Este artigo descreve o método prático de clicar na caixa de entrada para exibir a caixa de seleção no JS+CSS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JS+CSS cria um efeito prático da caixa de seleção de caixa de entrada de cliques </ititure>
<style type = "text/css">
.black_overlay {display: nenhuma; posição: absoluto; topo: 0%; esquerda: 0%; largura: 100%; altura: 100%; cor de fundo: #fffff; z-index: 1001; -moz-opacidade: 0.8; opacidade: .80; filtro: alfa (opacidade = 80);}
.white_content {display: nenhuma; posição: absoluto; topo: 25%; esquerda: 25%; largura: 50%; altura: 50%; preenchimento: 16px; borda: 16px laranja sólida; margem: -32px; cor de fundo: branco; index z: 1002; transbordamento: auto;}
</style>
<Script Language = "JavaScript" type = "text/javascript">
função moveselect (obj, alvo, todos) {
if (! all) all = 0
if (obj! = "[objeto]") obj = avaliar ("document.all."+obj)
Target = Eval ("Document.all."+Target)
if (all == 0)
{
while (obj.SelectedIndex> -1) {
//Alert(Obj.SelectedIndex)
Mot = obj.options [obj.SelectedIndex] .Text
mov = obj.options [obj.SelectedIndex] .Value
obj.remove (obj.SelectedIndex)
var newOption = document.createElement ("option");
newOption.Text = Mot
newOption.value = MOV
Target.add (NewOption)
}
}
outro
{
//alert(Obj.Options.Length)
para (i = 0; i <obj.length; i ++)
{
mot = obj.options [i] .text
mov = obj.options [i] .Value
var newOption = document.createElement ("option");
newOption.Text = Mot
newOption.value = MOV
Target.add (NewOption)
}
obj.Options.Length = 0
}
}
função dakai () {
document.getElementById ('Light'). style.display = 'bloco';
document.getElementById ('fade'). style.display = 'bloco'
}
função guanbi () {
// Passe o valor de selecionar à direita para a caixa de texto
var yuangong = document.getElementById ("yuangong")
yuangong.value = "" // Se esta frase não for adicionada, o resultado de cada seleção será adicionado.
var huoqu = document.getElementById ("d2")
for (var k = 0; k <HUOQU.Length; K ++)
yuangong.value = yuangong.value + huoqu.options [k] .Value + "" // "" O meio é um espaço, o separador do personagem, que pode ser alterado para outro
document.getElementById ('Light'). style.display = 'nenhum';
document.getElementById ('fade'). style.display = 'nenhum'
}
</script>
</head>
<Body>
<input type = "text" id = "yuangong" onclick = "dakai ()" size = "50">>
<div id = "luz">
<tabela id = "tabela4" borderColor = "#cccccc" borderColordark = "#cccccc" borderColorlight = "#fffff" CellPadding = "3" CellPacing = "0">
<tr>
<td align = "Center" valig = "Middle">
Funcionários neste departamento
<select size = "12" name = "d1" ondblClick = "moveselect (this, 'd2')" múltiplo = "múltiplo">>
<opção value = "zhang san"> zhang san </pption>
<opção value = "li si"> li si </pption>
<opção value = "xiao wang"> xiao wang </pption>
</leclect>
</td>
<td align = "Center" valig = "Middle">
<input type = "button" value = "<<" name = "b3" onclick = "moveselect ('d2', 'd1', 1)"> <br>
<input type = "button" value = "<" name = "b5" onclick = "moveselect ('d2', 'd1')"> <br>
<input type = "button" value = ">" name = "b6" onclick = "moveselect ('d1', 'd2')"> <br>
<input type = "button" value = ">>" name = "b4" onclick = "moveselect ('d1', 'd2', 1)"> <br>
</td>
<td align = "Center" valig = "Middle">
Funcionários esperando para dividir departamentos
<select size = "12" name = "d2" id = "d2" ondblClick = "moveselect (this, 'd1')" múltiplo = "múltiplo">
<opção value = "funcionário x"> funcionário x </pption>
<opção value = "empregador y"> empregador y </pption>
</leclect>
</td>
</tr>
</tabela>
<a href = "javascript: void (0)" onclick = "guanbi ()"> confirm </a>
<input type = "button" name = "button" onclick = "guanbi ()" value = "botão também pode ser confirmado">
</div>
<div id = "fade"> </div>
</body>
</html>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.