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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
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
php计算两个日期相差天数的方法
2015/03/14 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
一道python走迷宫算法题
2018/01/22 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
医院总经理职责
2013/12/26 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
2015年派出所工作总结
2015/04/24 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
入党申请书怎么写?
2019/06/21 职场文书