この記事では、入力ボックスをクリックしてJS+CSSの選択ボックスをポップアップする実用的な方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JS+CSSは実用的なクリック入力ボックスポップアップ選択ボックスエフェクトを作成します</title>
<style type = "text/css">
.black_overlay {display：none; position：absolute; top：0％; left：0％; width：100％; height：100％; background-color：#fffff; z-index：1001; -moz-opacity：0.8;不透明：.80;フィルター：alpha（Opacity = 80）;}
.white_content {display：none; position：aspolute; top：25％; left：25％; width：50％; height：50％; padding：16px; border：16px solid orange; margin：-32px; background-color：white; z-index：1002;オーバーフロー：auto;}
</style>
<スクリプト言語= "javascript" type = "text/javascript">
function moveselect（obj、ターゲット、すべて）{
if（！all）all = 0
if（obj！= "[object]"）obj = eval（ "document.all。"+obj）
ターゲット= eval（ "document.all。"+ターゲット）
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）
}
}
それ以外
{
//alert(obj.options.length）
for（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
}
}
function dakai（）{
document.getElementById（ 'light'）。style.display= 'block';
document.getElementById（ 'フェード'）。style.display = 'block'
}
function guanbi（）{
//テキストボックスに右側のselectの値を渡す
var Yuangong = document.getElementById（ "Yuangong"）
yuangong.value = "" //この文が追加されていない場合、各選択の結果が追加されます。
var huoqu = document.getElementById（ "d2"）
for（var k = 0; k <huoqu.length; k ++）
yuangong.value = yuangong.value + huoqu.options [k] .value + "" "/" "真ん中は空間であり、キャラクターセパレーターであり、別のものに変更できます。
document.getElementById（ 'light'）。style.display= 'none';
document.getElementById（ 'フェード'）。style.display = 'none'
}
</script>
</head>
<body>
<入力型= "text" id = "yuangong" onclick = "dakai（）" size = "50">
<div id = "light">
<表ID = "table4" bordercolor = "＃cccccc" bordercolordark = "＃cccccc" bordercolorlight = "＃fffff" cellpadding = "3" cellpacing = "0">
<tr>
<td align = "center" valign = "middle">
この部門の従業員
<select size = "12" name = "d1" ondblclick = "moveselect（this、 'd2'）"倍数= "倍数">
<オプション値= "Zhang San"> Zhang San </option>
<オプション値= "li si"> li si </option>
<オプション値= "Xiao Wang"> Xiao Wang </option>
</select>
</td>
<td align = "center" valign = "middle">
<入力型= "button" value = "<<" name = "b3" onclick = "moveselect（ 'd2'、 'd1'、1）"> <br>
<入力型= "button" value = "<" name = "b5" onclick = "moveselect（ 'd2'、 'd1'）"> <br>
<入力型= "button" value = ">" name = "b6" onclick = "moveselect（ 'd1'、 'd2'）"> <br>
<入力型= "button" value = ">>" name = "b4" onclick = "moveselect（ 'd1'、 'd2'、1）"> <br>
</td>
<td align = "center" valign = "middle">
部門を分割するのを待っている従業員
<select size = "12" name = "d2" id = "d2" ondblclick = "moveselect（this、 'd1'）"倍数= "倍数">
<オプション値= "従業員X">従業員X </option>
<オプション値= "雇用者y">雇用者y </option>
</select>
</td>
</tr>
</table>
<a href = "javascript：void（0）" onclick = "guanbi（）">確認</a>
<入力型= "ボタン" name = "button" onclick = "guanbi（）" value = "ボタンも確認できます">
</div>
<div id = "fade"> </div>
</body>
</html>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。