jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
本文實(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>
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- Chosen 基于jquery的選擇框插件使用方法
- 基于JQuery的Select選擇框的華麗變身
- 基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
- 基于jQuery下拉選擇框插件支持單選多選功能代碼
- jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進(jìn)行過濾示例
- jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼分享
- 各種選擇框jQuery的選中方法(實(shí)例講解)
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 用jquery實(shí)現(xiàn)的一個(gè)超級簡單的下拉菜單
- jQuery模擬12306城市選擇框功能簡單實(shí)現(xiàn)方法示例
相關(guān)文章
Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
Lazy Load 是一個(gè)用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的2012-10-10使用簡潔的jQuery方法實(shí)現(xiàn)隔行換色功能
本篇文章主要介紹了使用簡潔的jQuery方法實(shí)現(xiàn)隔行換色功能。需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01基于jquery.page.js實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了基于jquery.page.js實(shí)現(xiàn)的分頁效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01jquery下實(shí)現(xiàn)overlay遮罩層代碼
下面是個(gè)應(yīng)用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換,當(dāng)ajax出錯(cuò)時(shí)提示用戶2010-08-08jQuery插件開發(fā)的兩種方法及$.fn.extend的詳解
jQuery插件開發(fā)分為兩種:1 類級別、2 對象級別,下面為大家詳細(xì)介紹下2014-01-01