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实现文本框数量加减功能的例子分享
May 10 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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打开和关闭文件操作函数总结
2014/11/18 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
微信API接口大全
2015/04/15 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python入门篇之列表和元组
2014/10/17 Python
Python守护线程用法实例
2017/06/23 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python实现点对点聊天程序
2018/07/28 Python
在python中bool函数的取值方法
2018/11/01 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
岳庙导游词
2015/02/04 职场文书
酒店收银员岗位职责
2015/04/07 职场文书