jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法。分享给大家供大家参考，具体如下：

一、先描述下可以实现什么：

下拉框一改变，弹出框出现，选择弹出框中的值会赋值给下拉菜单

二、代码：

<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程序设计有所帮助。

赞 (0)

相关推荐

  • 各种选择框jQuery的选中方法(实例讲解)

    select下拉列表的选中方法是:$("slect option:eq(1)").attr("selected",true);//选中第二个option chekbox的选中方法:$("[value=check1"]:checkbox).attr("checked",true); radio的选中方法:$("[value=radio2"]:radio).attr("checked",tr

  • Jquery获取复选框被选中值的简单方法

    复制代码 代码如下: <input type="button" id="btn5" value="获得选中的所有值"><input type="text" name="dd" id="dd" size="50"  />$("#btn5").click(function(){          var str="&q

  • jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法.分享给大家供大家参考,具体如下: 一.先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二.代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略</ti

  • jquery复选框多选赋值给文本框的方法

    本文实例讲述了jquery复选框多选赋值给文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>jquery点击复选框触发事件给input赋值</title><base target="_blank" />  <m

  • JS实现下拉菜单赋值到文本框的方法

    JS实现下拉菜单赋值到文本框的方法

    本文实例讲述了JS实现下拉菜单赋值到文本框的方法.分享给大家供大家参考.具体如下: 这里演示下拉菜单和文本框构建的介绍栏,将Select框中的值定位到INPUT文本输入框中,是下拉框赋值到文本框的实例,上网时候貌似经常见的功能,只是不知如何形容,或许叫做联动吧. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-to-input-val-codes/ 具体代码如下: <html> <head> <SCRIP

  • jQuery实现在HTML文档加载完毕后自动执行某个事件的方法

    本文实例讲述了jQuery实现在HTML文档加载完毕后自动执行某个事件的方法.分享给大家供大家参考,具体如下: 原来onchange="fucntionname(parms)": <select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, 'selProvinces_{$sn}')" style="border

  • JavaScript监听文本框回车事件并过滤文本框空格的方法

    本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

  • 精通ASP.NET中弹出窗口技术

    并探讨常用非标准IE浏览器对弹出的窗口的各种过滤行为及使用弹出窗口相应对策,以期给出使用弹出窗口的一个通用较优方案. 作为Microsoft的最新建立动态Web网站的工具,ASP.NET相对于ASP和JSP在改变原始的Web编程方式方面有了长足的长进.它的代码与页面分离技术(CodeBehind)以及完善的Web服务器控件为程序员提供了一个更加符合传统编程的Web服务器端开发方式.但Web编程还是有着与传统编程不相同的特点,这些特点决定了ASP.NET编程中必须以一些特殊的技巧来完成程序要求,弹

  • jquery实现居中弹出层代码

    复制代码 代码如下: /* 弹出窗口定位到浏览器中间 1. show(options{ height:高度 width:宽度 speed:渐显时间 默认0 container:包含的html内容的jquery对象 model:是否是模态窗口,默认true,模态对话框就是在弹层下面在覆盖遮罩层,参考上篇文章Overlay实现 }) 2. close(speed:淡出时间 默认0) */ Q.Panel = function() { var self = this; self._resetPosit

  • 当某个文本框成为焦点时即清除文本框内容

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>成为焦点时清除文本框内容</title> <script> window.onload = initAll; function initAll(){ var clearText = document.getElementsByTagName("input

  • jQuery弹出窗口打开链接的实现代码

    下面给大家分享一段jquery代码实现弹出窗口打开链接的实现方法 window.open(url, name, style, replace); //弹出窗口打开链接,参数:网址,命名,窗体样式,是否替代原窗口 用处:打开新窗体,打开自定义页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在弹出窗口中打开新连接</title> </h

  • 23个Javascript弹出窗口特效整理

    1. Lightview Lightview是一个基于Prototype与Script.aculo.us开发,用于创建可以覆盖整个页面的模式对话框.展示的内容不仅可以是图片.文字.网页.通过Ajax 调用的内容,还可以是Quicktime/Flash影片都能够以非常酷的效果展示. 2. ThickBox (演示地址) ThickBox是一个模式对话框UI控件.基于jQuery开发,可以用来展示单张或多张图片,内嵌的内容,iframed的内容,或通过Ajax获取的内容. 3. Fonshen JS

随机推荐