In diesem Artikel wird die praktische Methode zum Klicken auf das Eingabefeld beschrieben, um das Auswahlfeld in JS+CSS zu übertreffen. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! 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">
<kopf>
<titels> JS+CSS erstellt einen praktischen Klick-Eingabefeld Pop-up-Auswahl-Box-Effekt </title>
<style type = "text/css">
.black_overlay {display: keine; Position: absolut; ober: 0%; links: 0%; Breite: 100%; Höhe: 100%; Hintergrundfarbe: #fffff; Z-Index: 1001; -Moz-Opazität: 0.8; Opazität: .80; Filter: Alpha (Offenheit = 80);};
.WHITE_CONTENT {Anzeige: Keine; Position: absolut; ober: 25%; links: 25%; Breite: 50%; Höhe: 50%; Polster: 16px; Rand: 16px Festes Orange; Rand: -32px; Hintergrundfarbe: Weiß; Z-Index: 1002; Überlauf: Auto;}
</style>
<script Language = "JavaScript" type = "text/javaScript">
Funktionsbewegung (OBJ, Target, alle) {
if (! alle) alle = 0
if (obj!
target = eval ("document.all."+Ziel)
if (alle == 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)
}
}
anders
{
//alert(obj.options.length)
für (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
}
}
Funktion Dakai () {
document.getElementById ('light'). style.display = 'block';
document.getElementById ('fade'). style.display = 'block' '
}
Funktion Guanbi () {
// Übergeben Sie den Wert der Auswahl rechts zum Textfeld
var yuangong = document.getElementById ("yuangong")
yuangong.value = "" // Wenn dieser Satz nicht hinzugefügt wird, wird das Ergebnis jeder Auswahl hinzugefügt.
var huoqu = document.getElementById ("D2")
für (var k = 0; k <huoqu.Length; k ++)
yuangong.value = yuangong.value + huoqu.options [k] .Value + "" // "" Die Mitte ist ein Raum, der Charakterabscheider, der in einen anderen geändert werden kann
document.getElementById ('light'). style.display = 'keine';
document.getElementById ('fade'). style.display = 'keine'
}
</script>
</head>
<body>
<Eingabe 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">
Mitarbeiter in dieser Abteilung
<select size = "12" name = "d1" ndblclick = "moveselect (this, 'd2')" multiple = "multiple">
<Option Value = "Zhang san"> Zhang san </option>
<Option value = "li si"> li si </option>
<option value = "xiao wang"> xiao wang </option>
</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>
<Eingabe type = "button" value = ">" name = "b6" onclick = "moveselect ('d1', 'd2')"> <br>
<Eingabe type = "button" value = ">>" name = "b4" onclick = "moveselect ('d1', 'd2', 1)"> <br>
</td>
<td align = "center" valign = "Middle">
Mitarbeiter, die darauf warten, Abteilungen zu teilen
<select size = "12" name = "d2" id = "d2" ndblclick = "moveselect (this, 'd1')" multiple = "multiple">
<Option Value = "Mitarbeiter x"> Mitarbeiter x </Option>
<Option Value = "Arbeitgeber y"> Arbeitgeber y </Option>
</select>
</td>
</tr>
</table>
<a href = "javaScript: void (0)" onclick = "guanbi ()"> bestätigen </a>
<Eingabe type = "button" name = "button" onclick = "guanbi ()" value = "kann ebenfalls bestätigt werden">
</div>
<div id = "fade"> </div>
</body>
</html>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.