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

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

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

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

實(shí)現(xiàn)方法一

<HTML>

<HEAD>

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

<TITLE>js實(shí)現(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>

實(shí)現(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è)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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