js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法
本文實(shí)例講述了js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法。分享給大家供大家參考。具體如下:
這里演示js下拉選擇框與輸入框聯(lián)動(dòng),直接添加選中值到輸入框中的效果。這種效果相信不少朋友見(jiàn)到過(guò)吧,省去用戶(hù)輸入的麻煩,這里使用JS直接將值賦予輸入框,了解原理之后,可靈活運(yùn)用,擴(kuò)展出更多的特效來(lái)。
運(yùn)行截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-select-value-to-input-codes/
具體代碼如下:
<html> <head> <title>下拉選擇框與輸入框聯(lián)動(dòng),直接添加選中值到輸入框</title> </head> <body> <select id="uiSel"> <option value="-1">請(qǐng)選擇</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)上傳文件添加和刪除文件選擇框
- JS點(diǎn)擊某個(gè)圖標(biāo)或按鈕彈出文件選擇框的實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果
- AngularJS入門(mén)教程之Select(選擇框)詳解
- 基于jQuery下拉選擇框插件支持單選多選功能代碼
- 詳解iOS時(shí)間選擇框
- js表單處理中單選、多選、選擇框值的獲取及表單的序列化
- javascript實(shí)現(xiàn)下拉提示選擇框
- js表單中選擇框值的獲取及表單的序列化
- JS實(shí)現(xiàn)單擊輸入框彈出選擇框效果完整實(shí)例
- jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
- 深入理解選擇框腳本[推薦]
相關(guān)文章
JavaScript和jQuery獲取input框的絕對(duì)位置實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JavaScript和jQuery獲取input框的絕對(duì)位置實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10基于bootstrap-datetimepicker.js不支持IE8的快速解決方法
下面小編就為大家?guī)?lái)一篇基于bootstrap-datetimepicker.js不支持IE8的快速解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11使用JS實(shí)現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
這篇文章主要介紹了使用JS實(shí)現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能,需要的朋友可以參考下2014-10-10JS Range HTML文檔/文字內(nèi)容選中、庫(kù)及應(yīng)用介紹
本文的內(nèi)容基本上是基于“區(qū)域范圍對(duì)象(Range objects)”這個(gè)概念來(lái)說(shuō)的2011-05-05Ant Design Blazor 組件庫(kù)的路由復(fù)用多標(biāo)簽頁(yè)功能
在 Ant Design Blazor 組件庫(kù)中實(shí)現(xiàn)多標(biāo)簽頁(yè)組件的呼聲日益高漲。于是,我利用周末時(shí)間,結(jié)合 Blazor 內(nèi)置路由組件實(shí)現(xiàn)了基于 Tabs 組件的 ReuseTabs 組件,需要的朋友跟隨小編一起看看吧2021-07-07JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4
DOM(Document Object Model),即“文檔對(duì)象模型”?;谡Z(yǔ)義的邏輯結(jié)構(gòu),DOM將網(wǎng)頁(yè)內(nèi)的元素與內(nèi)容呈現(xiàn)為一個(gè)清晰、易讀的樹(shù)狀模型,下面小編把最近整理有關(guān)javascript筆記之DOM基礎(chǔ)分享給大家,有需要的朋友可以參考下2015-08-08javascript運(yùn)算符——邏輯運(yùn)算符全面解析
下面小編就為大家?guī)?lái)一篇javascript運(yùn)算符——邏輯運(yùn)算符詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06