首頁 > web前端 > js教程 > js下拉選擇框與輸入框聯動實作新增選取值到輸入框的方法_javascript技巧

js下拉選擇框與輸入框聯動實作新增選取值到輸入框的方法_javascript技巧

WBOY
發布: 2016-05-16 15:44:41
原創
1769 人瀏覽過

本文實例講述了js下拉選擇框與輸入框聯動實現添加選取值到輸入框的方法。分享給大家供大家參考。具體如下:

這裡示範js下拉選擇框與輸入框聯動,直接加入選取值到輸入框中的效果。這種效果相信不少朋友見過吧,省去用戶輸入的麻煩,這裡使用JS直接將值賦予輸入框,了解原理之後,可靈活運用,擴展出更多的特效來。

運作截圖如下:

線上示範網址如下:

http://demo.jb51.net/js/2015/js-select-value-to-input-codes/

具體程式碼如下:

<html>
<head>
<title>下拉选择框与输入框联动,直接添加选中值到输入框</title>
</head>
<body>
<select id="uiSel">
  <option value="-1">请选择</option>
  <option value="until1">unti1</option>
  <option value="until2">unti2</option>
  <option value="until3">unti3</option>
  <option value="until4">unti4</option>
  <option value="until5">unti5</option>
</select>
<input type="text" name="" id="show" />
</body>
<script type="text/javascript">
document.getElementById('uiSel').onchange=function (){
  if(this.options[0].value==-1)this.options[0]=null;
  document.getElementById('show').value=this.value
};
</script>
</html>

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板