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>
<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)方式二
復制代碼 代碼如下:
<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 />
<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程序設計有所幫助。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了JS+CSS實現(xiàn)DIV層的展開、收縮效果，以兩個完整實例介紹了JS控制DIV層的展開、收縮效果，感興趣的小伙伴們可以參考一下2016-01-01
通過JAVASCRIPT讀取ASP設定的COOKIE...2007-02-02
詳解JavaScript數(shù)據(jù)類型和判斷方法
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和判斷方法的相關資料，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)漂亮的星空背景，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
本篇文章主要是對JS中類或對象的定義進行了說明介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了點擊更換背景顏色或圖片的js代碼，需要的朋友可以參考一下2013-06-06
JavaScript Distilled 基礎知識與函數(shù)
JavaScript是一種動態(tài)的，弱類型的，基于原型的，面向對象的解釋型語言。函數(shù)是JavaScript中的頭等公民。2010-04-04
這篇文章主要介紹了JavaScript實現(xiàn)翻頁功能(附效果圖)，在項目需求中經(jīng)常遇到，今天小編抽時間給大家分享JavaScript實現(xiàn)翻頁功能實例代碼，需要的朋友參考下吧2017-02-02
JavaScript實現(xiàn)動態(tài)網(wǎng)頁時鐘
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)網(wǎng)頁時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript數(shù)據(jù)結構與算法之檢索算法實例分析【順序查找、最大最小值、自組織查詢】
這篇文章主要介紹了JavaScript數(shù)據(jù)結構與算法之檢索算法,結合實例形式分析了順序查找、最大最小值、自組織查詢算法相關原理與實現(xiàn)技巧,需要的朋友可以參考下2019-02-02