日期:2014-05-16  浏览次数:20349 次

下拉列表中的内容排序问题,求助
我目前需要干一件这样的事,下拉列表的代码如下:
HTML code

<select name="select" id="select">
              <option value="0">乏力</option>
              <option value="1">消瘦</option>
              <option value="2">食少</option>
              <option value="3">头晕</option>
            </select>


当然还有很多option,共有22个。现在需要这样做,要求能在下拉列表中输入一个字母(这个字母是某个选择项的首字母),然后下拉列表自动显示那个选择项。比如输入“S”,则下拉列表显示的是“食少”这一项。求大神帮帮我解决这个问题,再次拜谢了

------解决方案--------------------
<!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>
<script type="text/javascript">
function ShowContext(seid,txid){
this.context=["2","22","222","2222","22222","222222","2222222","22222222"];
this.oselect=document.getElementById(seid);
this.otext=document.getElementById(txid);
}
ShowContext.prototype.shows=function(){
var txvalue=this.otext.value;
this.oselect.length=0;
for(var i=0;i<this.context.length;i++){
if(this.context[i].indexOf(txvalue)==0){
var o=new Option(this.context[i],this.context[i]);
o.ondblclick=getcontext;
this.oselect[this.oselect.length]=o;
}
}
this.oselect.size=this.oselect.length>3?this.oselect.length:3;
this.isshow();
}
ShowContext.prototype.addcontext=function(){
var context=this.otext.value;
var m=0;
for(var i=0;i<this.context.length;i++){
if(this.context[i]!=context){
m+=1;
}else{
break;
}
}
if(m==this.context.length){
this.context.push(context);
}
this.otext.value="";
}
ShowContext.prototype.isshow=function(){
if(this.oselect.length){
this.oselect.style.display="";
}else{
this.oselect.style.display="none";
}
}
function getcontext(){
var context=this.value;
var oselect=document.getElementById("select");
var otext=document.getElementById("text");
otext.value=context;
oselect.length=0;
oselect.style.display="none";
}
var s;
window.onload=function(){
s=new ShowContext("select","text");
}
</script>
</head>

<body>
<input type="text" id="text" onkeyup="s.shows()"><input type="button" onclick="s.addcontext()" value="add"><br/>
<select id="select" style="display:none">
</select>
</body>
</html>
以前写的一个 将就着看吧 哈