jQuery는 팝업 창 선택 상자의 내용을 선택하고 이를 텍스트 box_jquery에 할당하는 방법을 구현합니다.
- WBOY원래의
- 2016-05-16 15:30:362097검색
이 기사의 예에서는 팝업 창 선택 상자의 내용을 선택하고 이를 텍스트 상자에 할당하는 jQuery 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
1. 먼저 달성할 수 있는 사항을 설명하세요.
드롭다운 상자가 변경되면 팝업 상자가 나타납니다. 팝업 상자에서 값을 선택하면 드롭다운 메뉴에 할당됩니다.
2. 코드:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Subscribe策略</title>
<style type="text/css">
* { margin: 0; padding: 0;}
#bg{
display:none;
position:fixed;
_position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background:#000;
border:1px solid #cecece;
z-index:1;
}
#logWin{
display: none;
margin-top:300;
padding:0;
position:fixed;
_position:absolute;
z-index:2;
width:230px;
height:140px;
border:1px solid #c8c8c8;
background:#fff;
overflow:auto;
}
#logWin h2{
height:30px;
background:#c8c8c8;
text-align:center;
line-height:30px;
color:#fff;
}
#logWin form{
margin:20px 10px 10px 10px;
}
#logWin .dataArea{
margin-top:10px;
}
#logWin .controlArea{
margin-top:13px;
margin-left:35px;
}
#logWin .controlArea input{
width:60px;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function findit(msg){
var logStatus = 0;
if(msg==2)
checkWin(logStatus);
}
function centerWin(){
//center the Win to the center of screen
var windowWidth = document.documentElement.clientWidth,
windowHeight = document.documentElement.clientHeight,
scrollTop = document.documentElement.scrollTop,
scrollLeft = document.documentElement.scrollLeft,
popupWidth = $("#logWin").width(),
popupHeight = $("#logWin").height();
$("#logWin").css({
"display" : "block",
"position" : "absolute",
"top" : scrollTop + windowHeight/2 - popupHeight/2,
"left" : scrollLeft + windowWidth/2 - popupWidth/2
});
//only need force for IE6
$("#bg").css({"height" : windowHeight});
}
function checkWin(logStatus01) {
logStatus=logStatus01;
if (logStatus == 0) {
//if the window is disabled, enable the window
centerWin();
$("#bg").css({"opacity":"0.5"});
$("#bg").fadeIn("fast");
logStatus = 1;
} else {
//disable the window
$("#bg").fadeOut("fast");
$("#logWin").fadeOut("fast");
logStatus = 0;
}
}
$(function() {
$("#no1,#no2,#no3,#no4").click(function(){
var msg01=$(this).text();
$("#role").append("<option selected='selected'>"+msg01+"</option>");
$("#logWin").css({
"display" : "",
});
});
});
</script>
</head>
<body>
<select name="role_select" style="width: 154px" id="role" class="login_input"
onchange="findit(this.options[this.options.selectedIndex].value)">
<option value="1">******</option>
<option value="1">******</option>
<option value="2">输入</option>
</select>
<div id="logWin">
<h2>点击你想输入的内容</h2>
<ul style="margin-left=10px; list-style:none;">
<li id="no1">NO1</li>
<li id="no2">NO2</li>
<li id="no3">NO3</li>
<li id="no4">NO4</li>
</ul>
</div>
</body>
</html>
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.