Este artículo describe el método práctico para hacer clic en el cuadro de entrada para aparecer el cuadro de selección en JS+CSS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> JS+CSS crea una práctica Haga clic en el cuadro de entrada del cuadro Pop-up Effect </title>
<style type = "text/css">
.Black_Overlay {Display: Ninguno; Posición: Absoluto; Top: 0%; Izquierda: 0%; Ancho: 100%; Altura: 100%; Color de fondo: #FFFFFF; Z-Index: 1001; -Moz-Opacidad: 0.8; Opacidad: .80; Filtro: Alpha (Opacidad = 80);}
.white_content {visualización: ninguna; posición: absoluta; arriba: 25%; izquierda: 25%; ancho: 50%; altura: 50%; relleno: 16px; borde: 16px sólido naranja; margen: -32px; color de fondo: blanca; z-odex: 1002; desbordamiento: auto;}
</style>
<script language = "javaScript" type = "text/javaScript">
función MovesElect (obj, objetivo, todos) {
if (! todos) all = 0
if (obj! = "[objeto]") obj = eval ("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 newoction = document.createElement ("opción");
NewOption.Text = MOT
NewOption.value = mov
Target.Add (NewOption)
}
}
demás
{
//alert(obj.options.length)
para (i = 0; i <obj.length; i ++)
{
mot = obj.options [i] .Text
mov = obj.options [i] .Value
var newoction = document.createElement ("opción");
NewOption.Text = MOT
NewOption.value = mov
Target.Add (NewOption)
}
obj.options.length = 0
}
}
función dakai () {
document.getElementById ('light'). style.display = 'block';
document.getElementById ('fade'). style.display = 'block'
}
función guanbi () {
// pasar el valor de select a la derecha al cuadro de texto
var yuangong = document.getElementById ("yuangong")
yuangong.value = "" // Si esta oración no se agrega, se agregará el resultado de cada selección.
var huOqu = document.getElementById ("D2")
para (var k = 0; k <huoqu.length; k ++)
yuangong.value = yuangong.value + huoqu.options [k] .value + "" // "" El medio es un espacio, el separador de caracteres, que se puede cambiar a otro
document.getElementById ('light'). style.display = 'none';
document.getElementById ('Fade'). style.display = 'Ninguno'
}
</script>
</ablo>
<Body>
<input type = "text" id = "yuangong" onClick = "dakai ()" size = "50">
<div id = "luz">
<table id = "table4" borderColor = "#cccccc" borderCollark = "#cccccc" borderColorlight = "#fffff" cellPadding = "3" celular = "0">
<tr>
<td align = "center" valign = "Middle">
Empleados en este departamento
<select size = "12" name = "d1" onDblClick = "MoveSElect (this, 'd2')" múltiple = "múltiple">
<opción valor = "zhang san"> zhang san </opción>
<opción valor = "li si"> li si </ppection>
<opción valor = "xiao wang"> xiao wang </opción>
</select>
</td>
<td align = "center" valign = "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" valign = "Middle">
Empleados que esperan dividir los departamentos
<select size = "12" name = "d2" id = "d2" onDblClick = "MoveSElect (this, 'd1')" múltiple = "múltiple">
<opción valor = "empleado x"> empleado x </opción>
<opción valor = "empleador y"> empleador y </ppection>
</select>
</td>
</tr>
</table>
<a href = "javascript: void (0)" onClick = "guanbi ()"> confirmar </a>
<input type = "button" name = "button" onClick = "guanbi ()" value = "El botón también se puede confirmar">
</div>
<div id = "fade"> </div>
</body>
</html>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.