欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法

 更新時(shí)間：2015年11月23日 14:16:13   作者：憤怒的火柴  
這篇文章主要介紹了jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法。分享給大家供大家參考，具體如下：

一、先描述下可以實(shí)現(xiàn)什么：

下拉框一改變，彈出框出現(xiàn)，選擇彈出框中的值會(huì)賦值給下拉菜單

二、代碼：

<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>點(diǎn)擊你想輸入的內(nèi)容</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>

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • jQuery Tree Multiselect使用詳解

    jQuery Tree Multiselect使用詳解

    這篇文章主要為大家詳細(xì)介紹了jQuery Tree Multiselect的使用方法，這個(gè)插件允許用戶以樹(shù)型的形式來(lái)呈現(xiàn)列表復(fù)選框的選擇，多用于權(quán)限管理中用于分配不同的權(quán)限，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • Lazy Load 延遲加載圖片的jQuery插件中文使用文檔

    Lazy Load 延遲加載圖片的jQuery插件中文使用文檔

    Lazy Load 是一個(gè)用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁(yè)面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的
    2012-10-10
  • 使用簡(jiǎn)潔的jQuery方法實(shí)現(xiàn)隔行換色功能

    使用簡(jiǎn)潔的jQuery方法實(shí)現(xiàn)隔行換色功能

    本篇文章主要介紹了使用簡(jiǎn)潔的jQuery方法實(shí)現(xiàn)隔行換色功能。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2014-01-01
  • 利用Jquery實(shí)現(xiàn)可多選的下拉框

    利用Jquery實(shí)現(xiàn)可多選的下拉框

    本篇文章主要是對(duì)Jquery實(shí)現(xiàn)可多選的下拉框的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2014-02-02
  • 基于jquery.page.js實(shí)現(xiàn)分頁(yè)效果

    基于jquery.page.js實(shí)現(xiàn)分頁(yè)效果

    這篇文章主要為大家詳細(xì)介紹了基于jquery.page.js實(shí)現(xiàn)的分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-01-01
  • jquery下實(shí)現(xiàn)overlay遮罩層代碼

    jquery下實(shí)現(xiàn)overlay遮罩層代碼

    下面是個(gè)應(yīng)用的小例子用來(lái)統(tǒng)一處理ajax請(qǐng)求中利用完全透明遮罩層組織用戶和界面元素交換，當(dāng)ajax出錯(cuò)時(shí)提示用戶
    2010-08-08
  • jQuery插件開(kāi)發(fā)的兩種方法及$.fn.extend的詳解

    jQuery插件開(kāi)發(fā)的兩種方法及$.fn.extend的詳解

    jQuery插件開(kāi)發(fā)分為兩種：1 類級(jí)別、2 對(duì)象級(jí)別，下面為大家詳細(xì)介紹下
    2014-01-01
  • Jquery easyUI 更新行示例

    Jquery easyUI 更新行示例

    這篇文章主要介紹了Jquery easyUI 更新行、更新指定的行,需要的朋友可以參考下
    2014-03-03
  • 深入分析jQuery.one() 函數(shù)

    深入分析jQuery.one() 函數(shù)

    這篇文章主要介紹了jQuery.one() 函數(shù)的用法，文中通過(guò)示例代碼幫助大家更好的學(xué)習(xí)，感興趣的朋友可以參考一下
    2020-06-06
  • jQuery 計(jì)算iframe 窗口大小的方法

    jQuery 計(jì)算iframe 窗口大小的方法

    這篇文章主要介紹了jQuery如何計(jì)算iframe窗口大小,需要的朋友可以參考下
    2014-05-05

最新評(píng)論