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