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


Posted in Javascript onNovember 23, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
Vue生命周期示例详解
Apr 12 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
Bootstrap每天必学之表单
Nov 23 #Javascript
jquery制作属于自己的select自定义样式
Nov 23 #Javascript
基于jquery实现省市联动效果
Nov 23 #Javascript
jquery实现加载进度条提示效果
Nov 23 #Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 #Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 #Javascript
Jquery 效果使用详解
Nov 23 #Javascript
You might like
杏林同学录(九)
2006/10/09 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python中文编码问题小结
2014/09/28 Python
Python中with及contextlib的用法详解
2017/06/08 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python机器学习之神经网络实现
2018/10/13 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python如何实现DES加密
2020/09/21 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
书香校园建设方案
2014/05/02 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
小区推广策划方案
2014/06/06 职场文书
求职自我推荐信
2014/06/25 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
浅谈Python协程asyncio
2021/06/20 Python