이 기사에서는 입력 상자를 클릭하여 JS+CSS에서 선택 상자를 팝업하는 실제 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> JS+CSS는 실용적인 클릭 입력 상자 팝업 선택 상자 효과를 만듭니다.
<스타일 유형 = "텍스트/CSS">
.black_overlay {디스플레이 : 없음; 위치 : 절대; 상단; 상단; 상단; 왼쪽 : 0%; 폭 : 100%; 높이 : 100%; 배경색 : #fffff; z-index : 1001;-Moz-opacity : 0.8; 불투명도 : .80; 필터 : Alpha (불투명도 = 80);}
.white_content {디스플레이 : 없음; 위치 : 절대; 상단; 상단; 상단; 왼쪽; 왼쪽 : 25%; 폭 : 50%; 높이 : 50%; 패딩 : 16px; 경계 : 16px 솔리드 오렌지; 마진 : -32px; 배경색; z- 안개 : 1002; 오버 플로우 : 오토;}
</스타일>
<script language = "javaScript"type = "text/javaScript">
함수 movesElect (obj, target, all) {
if (! all) 모두 = 0입니다
if (obj! = "[Object]") obj = val ( "document.all."+obj)
대상 = 평가 ( "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 ( "옵션");
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 ( "옵션");
newoption.text = mot
newOption.Value = mov
target.add (newoption)
}
obj.options.length = 0
}
}
함수 dakai () {
document.getElementById ( 'light'). style.display = 'block';
document.getElementById ( 'fade'). style.display = 'block'
}
함수 guanbi () {
// 텍스트 상자에 오른쪽에서 선택한 값을 전달합니다.
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 ( 'fade'). style.display = 'none'
}
</스크립트>
</head>
<body>
<입력 유형 = "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">
이 부서의 직원
<select size = "12"name = "d1"ondblclick = "movesElect (this, 'd2')"multure = "multiple">
<옵션 값 = "Zhang San"> Zhang San </옵션>
<옵션 값 = "li si"> li si </옵션>
<옵션 값 = "Xiao Wang"> Xiao Wang </옵션>
</선택>
</td>
<td align = "center"valign = "middle">
<입력 유형 = "버튼"value = "<<"이름 = "b3"onclick = "movesElect ( 'd2', 'd1', 1)"> <br>
<입력 유형 = "버튼"value = "<"name = "b5"onclick = "movesElect ( 'd2', 'd1')" "> <br>
<입력 유형 = "버튼"value = ">"name = "b6"onclick = "movesElect ( 'd1', 'd2')"> <br>
<입력 유형 = "버튼"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')"multure = "multure">
<옵션 값 = "직원 x"> 직원 x </옵션>
<옵션 값 = "고용주 y"> 고용주 y </옵션>
</선택>
</td>
</tr>
</테이블>
<a href = "javaScript : void (0)"onclick = "guanbi ()"> 확인 </a>
<입력 유형 = "버튼"이름 = "버튼"onclick = "guanbi ()"value = "버튼도 확인할 수 있습니다.">
</div>
<div id = "페이드"> </div>
</body>
</html>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.