【请问】下拉选项框(select)按键过滤和选项定位有关问题
日期：2014-05-16 浏览次数：20429 次
【请教】下拉选项框(select)按键过滤和选项定位问题 ？
大家好，我有个问题不知道如何解决，特此请教：
现有一个下拉选项框 <select> </select> , 里面有几百个 <option> ，是各个国家的英文名称，比如 China, Chile, Canada等，每次选某一个国家时，都要很费劲的拉很长的列表，输入数据多时，相当耗时，并且容易出错。
现在希望有这样的解决方式：
（1）鼠标点中下拉选项框
（2）键盘输入按键，当输入c时，自动显示以c开头的选项，再按h时，自动显示以ch开头的选项，如此，输入chi时，基本上能定位到China或Chile等国家了。
（3）鼠标点击下拉选项框外面的其他位置，选项即确定，并且键盘按键不再捕捉。
（4）采用javascript方式
不知有无例子？？ 望不吝赐教。
非常感谢！！！
------解决方案--------------------
做了个例子,大体上是这个意思,样式麻烦lz自己调下(IE测试通过):
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> new page </title>
<script>
var cArray=new Array();
cArray[0]= "china ";
cArray[1]= "japan ";
cArray[2]= "canada ";
cArray[3]= "chine ";
cArray[4]= "chinaaa ";
function getC(obj){
deleteAllRow();
var str=obj.value;
for(var i=0;i <cArray.length;i++){
if(cArray[i].indexOf(str)==0){
var tr=document.createElement( "TR ");
tr.name=cArray[i];
tr.onmouseover=over(tr);
tr.onmouseout=out(tr);
tr.onclick=choose(tr);
var td=document.createElement( "TD ");
td.innerText=cArray[i];
tr.appendChild(td);
table.firstChild.appendChild(tr);
}
}
table.style.display= "block ";
}
function over(obj){
return function (){obj.style.backgroundColor= "blue ";};
}
function out(obj){
return function (){obj.style.backgroundColor= " ";};
}
function choose(obj){
return function (){txt1.value=obj.name;table.style.display= "none ";};
}
function deleteAllRow(){
var len=table.rows.length;
for(var i=len-1;i> =0;i--){
var tr=table.rows(i);
table.firstChild.removeChild(tr);
}
}
</script>
</head>
<body>
<div id=div1 style= "position:absolute;left:100px;top:100px ">
<input type=text id=txt1 style= "position:absolute;left:0px;top:0px;width:80px;height:24px " value= " " onpropertychange=getC(this)>
<div id=div2 style= "position:absolute;left:80px;top:0px;width:15px;height:20px;background-color:#cccccc "> </div>
<table id=table style= "position:absolute;left:0px;top:24px;width:95px;display:none;background-color:#cccccc "> </table>
</div>
</body>
</html>
------解决方案--------------------
select有自动定位的功能：
按c，定位到以c开头的
再安一下c，定位到第二个以c开头的.
跟楼主的要求不一样
不过对于一个国家选择，应该足够用了
------解决方案--------------------
晕，lz 在 css 区问了，这边咋又问了一遍
L@_@K
<!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>
<title> dhtml.selectAndOptions.filterByKeyCode.html </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao@126.com " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for javascript region of csdn " />
</head>
<body>
大家好，我有个问题不知道如何解决，特此请教：
现有一个下拉选项框 <select> </select> , 里面有几百个 <option> ，是各个国家的英文名称，比如 China, Chile, Canada等，每次选某一个国家时，都要很费劲的拉很长的列表，输入数据多时，相当耗时，并且容易出错。
现在希望有这样的解决方式：
（1）鼠标点中下拉选项框
（2）键盘输入按键，当输入c时，自动显示以c开头的选项，再按h时，自动显示以ch开头的选项，如此，输入chi时，基本上能定位到China或Chile等国家了。
（3）鼠标点击下拉选项框外面的其他位置，选项即确定，并且键盘按键不再捕捉。
（4）采用javascript方式
不知有无例子？？ 望不吝赐教。
非常感谢！！！
------解决方案--------------------
做了个例子,大体上是这个意思,样式麻烦lz自己调下(IE测试通过):
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> new page </title>
<script>
var cArray=new Array();
cArray[0]= "china ";
cArray[1]= "japan ";
cArray[2]= "canada ";
cArray[3]= "chine ";
cArray[4]= "chinaaa ";
function getC(obj){
deleteAllRow();
var str=obj.value;
for(var i=0;i <cArray.length;i++){
if(cArray[i].indexOf(str)==0){
var tr=document.createElement( "TR ");
tr.name=cArray[i];
tr.onmouseover=over(tr);
tr.onmouseout=out(tr);
tr.onclick=choose(tr);
var td=document.createElement( "TD ");
td.innerText=cArray[i];
tr.appendChild(td);
table.firstChild.appendChild(tr);
}
}
table.style.display= "block ";
}
function over(obj){
return function (){obj.style.backgroundColor= "blue ";};
}
function out(obj){
return function (){obj.style.backgroundColor= " ";};
}
function choose(obj){
return function (){txt1.value=obj.name;table.style.display= "none ";};
}
function deleteAllRow(){
var len=table.rows.length;
for(var i=len-1;i> =0;i--){
var tr=table.rows(i);
table.firstChild.removeChild(tr);
}
}
</script>
</head>
<body>
<div id=div1 style= "position:absolute;left:100px;top:100px ">
<input type=text id=txt1 style= "position:absolute;left:0px;top:0px;width:80px;height:24px " value= " " onpropertychange=getC(this)>
<div id=div2 style= "position:absolute;left:80px;top:0px;width:15px;height:20px;background-color:#cccccc "> </div>
<table id=table style= "position:absolute;left:0px;top:24px;width:95px;display:none;background-color:#cccccc "> </table>
</div>
</body>
</html>
------解决方案--------------------
select有自动定位的功能：
按c，定位到以c开头的
再安一下c，定位到第二个以c开头的.
跟楼主的要求不一样
不过对于一个国家选择，应该足够用了
------解决方案--------------------
晕，lz 在 css 区问了，这边咋又问了一遍
L@_@K
<!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>
<title> dhtml.selectAndOptions.filterByKeyCode.html </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao@126.com " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for javascript region of csdn " />
</head>
<body>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
