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里的条件判断
Feb 27 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JS获取时间的方法
Jan 21 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
js密码强度检测
Jan 07 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
基于JSON数据格式详解
Aug 31 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
详解如何探测小程序返回到webview页面
May 14 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的开发框架的现状和展望
2007/03/16 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
javascript基本语法分析说明
2008/06/15 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
什么叫做SQL注入,如何防止
2016/10/04 面试题
文化与传播毕业生求职信
2014/03/09 职场文书
一年级小学生评语
2014/04/22 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript