我最最最可爱的javascript
一直没有这样做过，但是这次有特殊情况，一个select有几百上千个options，如果让用户手工的找到某个特定的option，那就很惨。于是决定加一个过滤的装置，当然可以设置一个交互式的查询，在新窗口查询出结果，然后选中设置opener的值。但是最后我决定用一个简洁的办法，非常有效，哈哈。
<script language="javascript">
function selectGroup(v){
var obj=document.all.groupid;
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].value==v){
obj.options[i].selected=true;
}else{
obj.options[i].selected=false;
}
}
}
function goFilter(start){
var k=document.all.filterText.value;
var obj=document.all.groupid;
var found=false;
var value=0;
if(start>10)return false; //10个字符内没有找到就放弃
if(k&&obj.options){
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].innerText.toLowerCase().indexOf(k)==start){
found=true;
value=obj.options[i].value;
break;
}
}
if(found){
selectGroup(value);
return true;
}else{
return(goFilter(start+1));
}
}else{
return(false);
}
}
</script>
<select name="groupid" style="width:200px">
<option value="0" selected >创建新分组</option>
<option value="4">画魂</option>
<option value="7">DVD]指环王I-魔戒之魔戒现身</option>
<option value="8">[DVD]指环王II-魔戒之双塔奇兵加长版4小时</option>
<option value="10">[DVD]指环王III-魔戒之王者归来</option>
.....................
<option value="498">杀杀人跳跳舞</option>
<option value="499">一个字头的诞生</option>
</select>
<input type="text" name="filterText" value="" size="15"><input type="button" value="过滤/查找" onclick="var r=goFilter(0);if(!r){alert('没有找到：（');}">
<br>
但这个查询我最后还是决定设置一个固定的限制位数，因为不想查询太慢还要去查询一次最长的字符串的长度。
最后我的感想就是：
Javascript太可爱啦！
不过有一个地方倒是可以改进改进,selectGroup倒是不需要遍历,只需要知道options的游标就可以了，呵呵：
<script language="javascript">
function selectGroup(v){
var obj=document.all.groupid;
obj.options[v].selected=true; //直接选中
}
function goFilter(start){
var k=document.all.filterText.value;
var obj=document.all.groupid;
var found=false;
var value=0;
if(start>10)return false; //10个字符内没有找到就放弃
if(k&&obj.options){
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].innerText.toLowerCase().indexOf(k)==start){
found=true;
value=obj.options[i].value;
break;
}
}
if(found){
selectGroup(i);//选中这个序号所在的option就可以了
return true;
}else{
return(goFilter(start+1));
}
}else{
return(false);
}
}
</script>
反正只是一个小改动，无所谓，客户端的资源而以
评论
发表评论