jQuery는 팝업 창 선택 상자의 내용을 선택하고 이를 텍스트 box_jquery에 할당하는 방법을 구현합니다.-JS 튜토리얼-php.cn

jQuery는 팝업 창 선택 상자의 내용을 선택하고 이를 텍스트 box_jquery에 할당하는 방법을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:30:36

원래의

2074명이 탐색했습니다.

이 기사의 예에서는 팝업 창 선택 상자의 내용을 선택하고 이를 텍스트 상자에 할당하는 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.