純JS 輸入框 onkeyup 下拉框

        頁面:

               

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>演示代碼</title>
  </head>
<body>
  <table>
		<tr>
		 <td>
	         <input type="text" id = "PRED_TSK_CD_TEXT" style="width:46%"/>
                 <select id="PRED_TSK_CD" name="PRED_TSK_CD" style="width:48%;" onchange="PRED_TSK_CD_TEXT.value=options[selectedIndex].text;"></select>
		</td>
		</tr>
	</table>
</body>
</html>

                 

       JS寫法


<%
//--------------------------------------------------------------------------------------------------
//下拉模糊查詢
//--------------------------------------------------------------------------------------------------
%>
function LoadSelect(){
	
	var SelectObj = document.getElementById("PRED_TSK_CD_TEXT");
	var OptionObj = document.getElementById("PRED_TSK_CD").options;
	var List = [];
    for (var i = 0; i < OptionObj.length; i++) {  
        List[i] = OptionObj[i].value + "|" + OptionObj[i].text;  
    }  
	
    SelectObj.onkeyup = function() {  
    	
        	OptionObj.length = 0;  
            for (var i = 0; i < List.length; i++) {
                if (List[i].indexOf(SelectObj.value) > -1) { 
                	OptionObj.add(new Option(List[i].split("|")[1], List[i].split("|")[0])); 
                }
            }  
    };  
}

       

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章