JS實(shí)現(xiàn)下拉菜單賦值到文本框的方法
更新時(shí)間：2015年08月18日 17:30:52 作者：企鵝
這篇文章主要介紹了JS下拉菜單賦值到文本框的方法,涉及javascript頁(yè)面元素的選擇與賦值的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)下拉菜單賦值到文本框的方法。分享給大家供大家參考。具體如下：
這里演示下拉菜單和文本框構(gòu)建的介紹欄，將Select框中的值定位到INPUT文本輸入框中，是下拉框賦值到文本框的實(shí)例，上網(wǎng)時(shí)候貌似經(jīng)常見(jiàn)的功能，只是不知如何形容，或許叫做聯(lián)動(dòng)吧。
運(yù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] = ""; //這里寫(xiě)入每個(gè)選項(xiàng)對(duì)應(yīng)的說(shuō)明文字
messages[1] = "http://m.fzitv.net";
messages[2] = "http://www.163.com";
messages[3] = "http://cn.yahoo.com";
//根據(jù)需要，這里應(yīng)該隨著選項(xiàng)的改變而增減項(xiàng)目
function messageReveal() {
var messageindex = document.messageForm.messagePick.selectedIndex;
//取得當(dāng)前下拉菜單選定項(xiàng)目的序號(hào)
helpmsg = messages[messageindex];
//根據(jù)序號(hào)取得當(dāng)前選項(xiàng)的說(shuō)明
document.messageForm.messageField.value = helpmsg
//將說(shuō)明寫(xiě)進(jìn)文框
}
// End -->
</SCRIPT>
<title>下拉菜單和文本框構(gòu)建的介紹欄</title>
</head>
<body>
<form name="messageForm">
<select name="messagePick" OnChange="messageReveal()">
<option value="0">請(qǐng)?jiān)谶@里選擇需要咨詢(xún)的信息
<option>腳本之家
<option>網(wǎng)易163
<option>中文雅虎
</select>
<br><br><br><br><br>
<input name="messageField" type="text" style="overflow:auto" />
</form>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了微信小程序點(diǎn)擊保存圖片到本機(jī)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
JavaScript保留兩位小數(shù)的2個(gè)自定義函數(shù)
這篇文章主要介紹了JavaScript保留兩位小數(shù)的2個(gè)自定義函數(shù),需要的朋友可以參考下2014-05-05
jQuery animate()實(shí)現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
這篇文章主要介紹了jQuery animate()實(shí)現(xiàn)背景色漸變效果的處理方法,結(jié)合實(shí)例形式分析了jQuery顏色插件jquery.color.js實(shí)現(xiàn)背景色漸變的簡(jiǎn)單操作技巧,需要的朋友可以參考下2017-03-03
javascript中的數(shù)據(jù)類(lèi)型檢測(cè)方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類(lèi)型檢測(cè)方法,結(jié)合實(shí)例形式分析了javascript數(shù)據(jù)類(lèi)型并總結(jié)分析了常見(jiàn)的數(shù)據(jù)類(lèi)型檢測(cè)操作技巧,需要的朋友可以參考下2019-08-08
JavaScript使用HTML5的window.postMessage實(shí)現(xiàn)跨域通信例子
這篇文章主要介紹了JavaScript使用HTML5的window.postMessage實(shí)現(xiàn)跨域通信例子,需要的朋友可以參考下2014-04-04
最近有經(jīng)常用到連接字符串的方法,但是對(duì)整體的方法比較模糊,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于JS字符串拼接的幾種常見(jiàn)方式,需要的朋友可以參考下2022-11-11
JavaScript 應(yīng)用類(lèi)庫(kù)代碼
S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 轉(zhuǎn)載傳播請(qǐng)保留版權(quán)2008-06-06
JS實(shí)現(xiàn)圖片的不間斷連續(xù)滾動(dòng)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS實(shí)現(xiàn)圖片的不間斷連續(xù)滾動(dòng)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
nuxtjs通過(guò)ecosystem.config.js配置pm2的方法
ecosystem.config.js 是一個(gè)特殊的配置文件,它允許您定義應(yīng)用的各種屬性,如腳本路徑、環(huán)境變量、日志設(shè)置等,這篇文章主要介紹了nuxtjs通過(guò)ecosystem.config.js配置pm2的方法,需要的朋友可以參考下2024-03-03
本篇文章主要是對(duì)js中replace的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12