JS實現(xiàn)下拉菜單賦值到文本框的方法
本文實例講述了JS實現(xiàn)下拉菜單賦值到文本框的方法。分享給大家供大家參考。具體如下:
這里演示下拉菜單和文本框構(gòu)建的介紹欄,將Select框中的值定位到INPUT文本輸入框中,是下拉框賦值到文本框的實例,上網(wǎng)時候貌似經(jīng)常見的功能,只是不知如何形容,或許叫做聯(lián)動吧。
運行效果如下圖所示:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-select-to-input-val-codes/
具體代碼如下:
<html> <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var messages = new Array(); messages[0] = ""; //這里寫入每個選項對應(yīng)的說明文字 messages[1] = "http://www.dbjr.com.cn"; messages[2] = "http://www.163.com"; messages[3] = "http://cn.yahoo.com"; //根據(jù)需要,這里應(yīng)該隨著選項的改變而增減項目 function messageReveal() { var messageindex = document.messageForm.messagePick.selectedIndex; //取得當前下拉菜單選定項目的序號 helpmsg = messages[messageindex]; //根據(jù)序號取得當前選項的說明 document.messageForm.messageField.value = helpmsg //將說明寫進文框 } // End --> </SCRIPT> <title>下拉菜單和文本框構(gòu)建的介紹欄</title> </head> <body> <form name="messageForm"> <select name="messagePick" OnChange="messageReveal()"> <option value="0">請在這里選擇需要咨詢的信息 <option>腳本之家 <option>網(wǎng)易163 <option>中文雅虎 </select> <br><br><br><br><br> <input name="messageField" type="text" style="overflow:auto" /> </form> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript實現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法
這篇文章主要介紹了JavaScript實現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法,分析了向setTimeout傳遞參數(shù)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04SwfUpload在IE10上不出現(xiàn)上傳按鈕的解決方法
在測試中發(fā)現(xiàn)使用了SwfUpload實現(xiàn)的無刷新上傳功能,在IE10上竟然無法使用了,難道SwfUpload不支持嗎?下面與大家分享下通過修改SwfUplad.JS文件讓其支持ie102013-06-06Bootstrap基本樣式學(xué)習(xí)筆記之表格(2)
Bootstrap提供了一個清晰的創(chuàng)建表格的布局,這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之表格基本樣式的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12動態(tài)的綁定事件addEventListener方法的使用
本文為大家介紹下動態(tài)的綁定事件的方法addEventListener的使用示例,不了解的朋友可以參考下2014-01-01