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] = ""; //這里寫入每個(gè)選項(xiàng)對(duì)應(yīng)的說(shuō)明文字
messages[1] = "http://www.dbjr.com.cn";
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ō)明寫進(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)谶@里選擇需要咨詢的信息
<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)文章
JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法,分析了向setTimeout傳遞參數(shù)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
SwfUpload在IE10上不出現(xiàn)上傳按鈕的解決方法
在測(cè)試中發(fā)現(xiàn)使用了SwfUpload實(shí)現(xiàn)的無(wú)刷新上傳功能，在IE10上竟然無(wú)法使用了，難道SwfUpload不支持嗎？下面與大家分享下通過(guò)修改SwfUplad.JS文件讓其支持ie102013-06-06
這篇文章主要介紹了JavaScript 反射和屬性賦值實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
Bootstrap基本樣式學(xué)習(xí)筆記之表格(2)
Bootstrap提供了一個(gè)清晰的創(chuàng)建表格的布局，這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之表格基本樣式的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
在輸入框里面預(yù)設(shè)一段提示文字，當(dāng)焦點(diǎn)在輸入框的時(shí)候清空這段文字，這在目前來(lái)說(shuō)已經(jīng)不是什么新鮮事了。2011-03-03
js不能獲取隱藏div的的寬度，現(xiàn)在的辦法是先將其顯示出來(lái)，再獲取其寬度，計(jì)算位置，下面的示例，大家可以參考下2014-09-09
本文結(jié)合前面發(fā)布的文章，詳細(xì)介紹了javascript的函數(shù)語(yǔ)法，非常的詳盡，非常的實(shí)用，這里推薦給大家，是篇不可多得的文章2021-09-09
這篇文章主要介紹了JS如何理解data URL，對(duì)data URL感興趣的同學(xué)，可以參考下2021-04-04
Javascript的匿名函數(shù)小結(jié)，需要的朋友可以參考下。2009-12-12
動(dòng)態(tài)的綁定事件addEventListener方法的使用
本文為大家介紹下動(dòng)態(tài)的綁定事件的方法addEventListener的使用示例，不了解的朋友可以參考下2014-01-01