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

更新时间：2015年11月23日 14:16:13 作者：愤怒的火柴

这篇文章主要介绍了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法,涉及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程序设计有所帮助。

您可能感兴趣的文章:

JQuery获取样式中的background-color颜色值的问题
用JQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样，经搜索找到了下段代码可解决此问题，感兴趣的朋友可以参考下
2013-08-08
jQuery中appendTo()方法用法实例
这篇文章主要介绍了jQuery中appendTo()方法用法,实例分析了appendTo()方法的功能、定义及把匹配的元素插入指定元素结尾的使用技巧,需要的朋友可以参考下
2015-01-01
jquery 学习之二属性相关
jquery 学习之二属性相关资料，学习jquery的朋友可以参考下。
2010-11-11
单元选择合并变色示例代码
这篇文章主要介绍了如何实现单元选择合并变色，感觉还不错的一个小功能，大家可以学习下
2014-05-05
jquery 缓存问题的几个解决方法
在IE浏览器下，一般的ajax的方法都是cache等于true的，下面有几个不错的解决方法，感兴趣的朋友可以参考下
2013-11-11
jQuery实现点击按钮文字变成input框点击保存变成文字
这篇文章主要介绍了jQuery实现点击按钮文字变成input框点击保存变成文字的相关资料，非常具有参考借鉴价值,需要的朋友可以参考下
2016-05-05
浅谈$(document)和$(window)的区别
本人在做项目的时候遇到$(document)，$(window)这两种写法立马让我蒙圈了，那么他们的区别是什么呢，在网友的帮助下，彻底了解了他们的区别，这里分享给大家。
2015-07-07
基于jquery的合并table相同单元格的插件(精简版)
正好项目中有个小需求, 要求把表格指定列中内容相同的单元格进行合并,本质上涉及的就是td的rowspan属性, 数出含相同内容单元格的个数, 然后给第一个与上一行内容不同的td其rowspan属性附上正确的值即可, 为了能直观的理解
2011-04-04
jQuery添加删除DOM元素方法详解
这篇文章主要介绍了jQuery添加删除DOM元素方法,结合实例形式较为详细的分析讲述了jQuery关于DOM元素节点的添加与删除相关技巧,需要的朋友可以参考下
2016-01-01
CSS3结合jQuery实现动画效果及回调函数的实例
下面小编就为大家分享一篇CSS3结合jQuery实现动画效果及回调函数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12