快捷導(dǎo)航

js實現(xiàn)Select下拉框具有輸入功能的方法

更新時間：2015年02月06日 16:07:18 作者：whazhl

這篇文章主要介紹了js實現(xiàn)Select下拉框具有輸入功能的方法,實例分析了兩種比較常見的實現(xiàn)方法,是非常實用的技巧,需要的朋友可以參考下

本文實例講述了js實現(xiàn)Select下拉框具有輸入功能的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

實現(xiàn)方法一

<HTML>

<HEAD>

<META http-equiv='Content-Type' content='text/html; charset=gb2312'>

<TITLE>js實現(xiàn)可輸入的下拉框</TITLE>

</HEAD>

<BODY>

<div style="position:relative;">

<span style="margin-left:100px;width:18px;overflow:hidden;">

<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">

<option value="德國">德國</option>

<option value="挪威">挪威</option>

<option value="瑞士"> 瑞士</option>

</select></span><input name="box" style="width:100px;position:absolute;left:0px;">

</div>

</BODY>

</HTML>

實現(xiàn)方式二

復(fù)制代碼代碼如下:

<select id="select" onkeydown="Select.del(this,event)" onkeypress="Select.write(this,event)">

<option value=""></option>

<option value="aaa">aaa</option>

<option value="bbb">bbb</option>

<option value="ccc">ccc</option>

</select>

<input type="button" value="獲取選擇值" id="test" onclick="test();"/>

<script>

var Select = {

del : function(obj,e){

if((e.keyCode||e.which||e.charCode) == 8){

var opt = obj.options[0];

opt.text = opt.value = opt.value.substring(0, opt.value.length>0?opt.value.length-1:0);

}

},

write : function(obj,e){

if((e.keyCode||e.which||e.charCode) == 8)return ;

var opt = obj.options[0];

opt.selected = "selected";

opt.text = opt.value += String.fromCharCode(e.charCode||e.which||e.keyCode);

}

}

function test(){

alert(document.getElementById("select").value);

}

</script><br />

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)tab響應(yīng)式切換特效
這篇文章主要為大家介紹了javascript實現(xiàn)tab響應(yīng)式切換特效，以一個完整的實例對tab響應(yīng)式切換特效進行詳細的分析，感興趣的小伙伴們可以參考一下
2016-01-01
解決火狐瀏覽器下JS setTimeout函數(shù)不兼容失效不執(zhí)行的方法
今天檢查自己用JQuery+AJAX+PHP做的網(wǎng)站后臺登錄檢測，愛其他瀏覽器中兼容性還不錯結(jié)果到了火狐（FireFox）瀏覽器下setTimeout這個JS內(nèi)置函數(shù)不執(zhí)行了，本文將提供詳細的解決方法
2012-11-11
javascript實現(xiàn)簡單的二級聯(lián)動
這篇文章主要介紹了javascript實現(xiàn)簡單的二級聯(lián)動,非常的實用，需要的朋友可以參考下
2015-03-03
JavaScript 數(shù)組遍歷的五種方法
這篇文章主要介紹了JavaScript 數(shù)組遍歷的五種方法，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下
2021-03-03
jQuery EasyUI window窗口使用實例代碼
本文通過實例代碼給大家介紹了jQuery EasyUI window窗口使用功能，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2017-12-12
JavaScript 數(shù)據(jù)類型詳解
本文主要介紹了JavaScript數(shù)據(jù)類型的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
JavaScript實現(xiàn)彈出式可拖動登錄框
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)彈出式可拖動登錄框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
用js來定義瀏覽器中一個左右浮動元素相對于頁面主體寬度的位置的函數(shù)
用js來定義瀏覽器中一個左右浮動元素相對于頁面主體寬度的位置的函數(shù) 函數(shù)的參數(shù)：elem元素、頁面主體寬度(如：990、950寬)、elem與頁面主體DIV的左邊距
2012-01-01
HTML DOM的nodeType值介紹
將HTML DOM中幾個容易常用的屬性做下記錄，需要的朋友可以參考下。
2011-03-03
javascript實現(xiàn)淘寶幻燈片廣告展示效果
這篇文章主要介紹了javascript實現(xiàn)淘寶幻燈片廣告展示效果的方法,以實例形式完整講述了javascript實現(xiàn)幻燈效果的javascript、css及html實現(xiàn)技巧,需要的朋友可以參考下
2015-04-04