Cet article décrit la méthode pratique de clic dans la zone d'entrée pour faire apparaître la zone de sélection dans JS + CSS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<Title> JS + CSS crée un effet pratique de la boîte de sélection de la boîte d'entrée de clic </Title>
<style type = "text / css">
.black_overlay {affichage: aucun; position: absolue; en haut: 0%; gauche: 0%; largeur: 100%; hauteur: 100%; fond-couleur: #fffff; z-index: 1001; -moz-opacity: 0,8; opacité: .80; filter: alpha (opacité = 80);};
.White_Content {affichage: Aucun; Position: Absolute; Top: 25%; gauche: 25%; largeur: 50%; hauteur: 50%; rembourrage: 16px; bordure: 16px Orange solide; marge: -32px; fond-couleur: blanc; z-index: 1002; overflow: auto;};
</ style>
<script lingots = "javascript" type = "text / javascript">
fonction MoveSelect (obj, cible, all) {
si (! tout) tout = 0
if (obj! = "[objet]") obj = evale
Target = EVAL ("Document.all." + Target)
si (tout == 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)
}
}
autre
{
//alert(obj.options.length)
pour (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
}
}
fonction dakai () {
document.getElementById ('Light'). Style.Display = 'Block';
document.getElementById ('Fade'). Style.display = 'Block'
}
fonction guanbi () {
// transmette la valeur de sélectionner à droite à la zone de texte
var yuangong = document.getElementByid ("yuangong")
yuangong.value = "" // Si cette phrase n'est pas ajoutée, le résultat de chaque sélection sera ajouté.
var huoch = document.getElementByid ("d2")
pour (var k = 0; k <huoqu.length; k ++)
yuangong.value = yuangong.value + huoqu.options [k] .value + "" // "" Le milieu est un espace, le séparateur de caractères, qui peut être changé en un autre
document.getElementById ('Light'). Style.display = 'Aucun';
document.getElementById ('Fade'). Style.display = 'Aucun'
}
</cript>
</ head>
<body>
<input type = "text" id = "yuangong" onclick = "dakai ()" size = "50">
<div id = "Light">
<table id = "table4" borderColor = "# cccccc" borderColordark = "# cccccc" borderColorlight = "# fffff" cellpadding = "3" cellpacing = "0">
<tr>
<td align = "Center" valign = "middle">
Employés de ce département
<select size = "12" name = "d1" ondblclick = "movselect (this, 'd2')" multiple = "multiple">
<Option Value = "Zhang San"> Zhang San </opoption>
<option value = "li si"> li si </ option>
<Option Value = "Xiao Wang"> Xiao Wang </ Option>
</lect>
</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 = "moveselelect ('d2', 'd1')"> <br>
<input type = "Button" value = ">" name = "b6" onclick = "moveselelect ('d1', 'd2')"> <br>
<input type = "Button" value = ">>" name = "b4" onclick = "moveselect ('d1', 'd2', 1)"> <br>
</td>
<td align = "Center" valign = "middle">
Les employés attendaient de diviser les services
<select size = "12" name = "d2" id = "d2" ondblclick = "movselect (this, 'd1')" multiple = "multiple">
<Option Value = "Employee X"> Employé x </opoption>
<Option Value = "Employeur Y"> Employeur y </opoption>
</lect>
</td>
</tr>
</ table>
<a href = "javascript: void (0)" onclick = "guanbi ()"> confirmer </a>
<entrée type = "bouton" name = "bouton" onclick = "guanbi ()" value = "Le bouton peut également être confirmé">
</div>
<div id = "fade"> </div>
</docy>
</html>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.