模仿开心网选择好友的效果

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Untitled Document</title>
  <script language="JavaScript" type="text/javascript">
   function displayDiv(boolDisplay,objValue)
   {
    if (boolDisplay)
     document.getElementById("div1").style.display = "block";
    else {
     document.getElementById("div1").style.display = "none";
     document.getElementById("txt1").value = objValue;
    }
   }
  </script>
  <style type="text/css">
   body{
    
   }
  </style>
 </head>
 <body>
  <div>
  <div><input type="text" id="txt1" name="txt1" /><input type="button" id="btn1" onclick="displayDiv(true,'');" value="select" /></div>
  <div id="div1" name="div1" style="position:absolute;display:none;z-index:9999;width:200px;height:50px;background-color:#fff;">
   <input type="radio" id="r1" name="r1" onclick="displayDiv(false,this.value);" value="username1" />username1
  </div>
  <input type="text" id="txt2" name="txt2" />
  </div>
  
 </body>
</html>

效果已实现.各位只要美好一下就是了!很简单!

你可能感兴趣的:(选择)