<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{color:red;text-decoration:none;font-size:12px}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body onload="Init()">
<center>
<table>
<tr>
<td>请输入1或2或3或4或5进行测试：<br><input name="txt" style="width:100px" onkeyup="SelectTip()" id="txts"><!-- <input type="button" value="reset" onclick="SelectTip(1)"> --></td>
</tr>
<tr>
<td>
<span id="demo" style="display:none"><select name="demo" style="width:100px" size=5 onchange="onch()" id="sel">
<option value="1">1</option>
<option value="12">12</option>
<option value="123">123</option>
<option value="1234">1234</option>
<option value="2">2</option>
<option value="23">23</option>
<option value="234">234</option>
<option value="2345">2345</option>
<option value="3">3</option>
<option value="34">34</option>
<option value="345">345</option>
<option value="3456">3456</option>
<option value="5">5</option>
<option value="51">51</option>
<option value="51w">51w</option>
<option value="51wi">51wi</option>
<option value="51win">51win</option>
<option value="51windows">51windows</option>
<option value="51windows">国盛安保</option>
<option value="51windows">国都证券</option>
<option value="51windows">51windows</option>
</select></span>
</td>
</tr>
</table>
<hr>
<script language="javascript">
$(function(){
$('#txts').click(function() {
if($('#demo').css("display")=="block"){
$('#demo').css('display','none');
}else{
$('#demo').css('display','block');
}
});
$('#demo').blur(function() {
$('#demo').css('display','none');
});
$(document).click(function(){
$("#demo").hide();
});
$("#txts").click(function(event){
event.stopPropagation();
});
});
var TempArr=[];//存贮option
function Init(){
var SelectObj=document.getElementById("sel");
for(i=0;i<SelectObj.options.length;i++){
TempArr[i]=new Array();
TempArr[i][0]=SelectObj.options[i].text;
TempArr[i][1]=SelectObj.options[i].value;
}
}
function SelectTip(){
var TxtObj=document.getElementById("txts");
var SelectObj=document.getElementById("sel");
SelectObj.options.length=0;
var Arr='';
for(i=0;i<TempArr.length;i++)
{
if(TempArr[i][0].indexOf(TxtObj.value)==0)
{
Arr="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>";
$("#sel").append(Arr);
}
}
}
function onch(){
var TxtObj=document.getElementById("txts");
TxtObj.value=$("#sel").find("option:selected").text();
$('#demo').css('display','none');
}
</script>
</body>
可输入的html下拉列表框，自带筛选
1星 需积分: 50 33 浏览量
2017-01-26
10:11:50
上传
评论 1
收藏 33KB RAR 举报 
完成版.rar （2个子文件） 
完成版 
jquery.min.js 94KB
完成.html 3KB资源评论
qq_163986132017-08-11不能实现纯鼠标操作 事件都没有 处理 。。
cuckoochun2018-07-23不能实现纯鼠标操作 事件都没有 处理 。。.....
