js使下拉式清單方塊可編輯不止是選擇

js使下拉式清單方塊可編輯不止是選擇

 下拉式清單方塊預設情況下是不可編輯的，下面為大家介紹個不錯的方法可以使下拉式清單方塊可編輯，具體實現如下，需要的朋友可以參考下

 代碼如下:

<script> 

function clearOption(obj,e){ 

var currKey=0,e=e||event; 

currKey=e.keyCode||e.which||e.charCode; 

if(currKey == 8){ 

obj.options[0].text = ""; 

} 

} 

function writeSelect(obj,e){ 

var currKey=0,e=e||event; 

currKey=e.keyCode||e.which||e.charCode; 

obj.options[0].selected = "select"; 

if(currKey != 8){//這個地方是為了避免在firefox又出現令人厭煩的亂碼,可以試試注釋這句話，看看在firefox的效果 

obj.options[0].text = obj.options[0].text + String.fromCharCode(currKey); 

} 

e.returnValue=false; 

return obj.options[0].text; 

} 

function ttt(){ 

var jg = document.getElementById("aa").options[document.getElementById("aa").selectedIndex].text; 

//當然也可以在前面的writeSelect函數裡面同時設定options的value，這樣的話，直接可以在該程式裡面用value取出 

jQuery("#aa").empty(); 

jQuery("#aa").append("<option value=''></option>"); 

} 

 

</script> 

 

 代碼如下:

<select style='width:150px;z-index:-1' id="aa" name="selectHelpCode" onkeydown="clearOption(this,event)" onkeypress="writeSelect(this,event)"> 

<option value=""></option> 

<option value="11">11</option> 

<option value="22">22</option> 

<option value="33">33</option> 

</select> 

<input type="button" value="清除" onclick="ttt();"/>