对于select下拉菜单,大家用得非常多了,但当下拉菜单的选项非常多时,怎么解决呢?比如商品分类、省市县之类的,少则几百多则上千。当然方案是有的,可以弹出层的方式,像51JOB的省市选择和行业选择。这里提供另一种解决方案,即:可筛选的下拉菜单。我把他写在一个jQuery插件中,调用只需一句话即可。

SFilter下载地址:下载

SFilter演示地址:演示

1.下载上面的压缩包首先调用jquery插件和SFilter插件


<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='sfilter.js'></script>
<link rel="stylesheet" href='sfilter.css' type="text/css" />

2.假设有下面的下拉菜单:


<select id="test">
<option value="0">所有品牌</option>
<option value='70' >A ABC</option>
<option value='191' >A 安泰</option>
<option value='428' >A 安吉尔</option>
<option value='122' >A 安可</option>
<option value='327' >A 爱宁</option>
</select>

我们只需要在JS代码中增加这样一行代码即可:


$(document).ready(function(){
$("#test").sfilter();
}
);

使用过程中如果发现任何BUG或不兼容的情况,请联系本人QQ93000214,下一步我将会继续改进这一插件。

经常用到的代码,却总是忘掉。总结一下,放在这里。
在下面所有代码前最好加上这句:


var selectId=document.getElemengById('selectId');

清空select的项


selectId.options.length = 0;

如果留下第一行的话就是


selectId.options.length = 1;

向select选项中 加入一个Option


var varOption = new Option(objOptionText,objOptionValue);
selectId.options[selectId.options.length] = varOption;
//或selectId.options.add(varOption);


从select选项中 删除一个Option


 for(var i=0;i<selectId.options.length;i++)
 {
     if(selectId.options[i].value == objOptionValue)
     {
         selectId.options.remove(i);
         break;
     }
 }      

设置select中text=”paraText”的第一个Option为选中


     for(var i=0;i<selectId.options.length;i++)
     {
         if(selectId.options[i].text == objOptionText)
         {
             selectId.options[i].selected = true;
             isExit = true;
             break;
         }
     }    

设置select中value=”paraValue”的Option为选中


selectId.value = objOptionValue;

得到select的当前选中项的value


var currSelectValue = selectId.value;

得到select的当前选中项的text


var currSelectText = selectId.options[selectId.selectedIndex].text;

得到select的当前选中项的Index


var currSelectIndex = selectId.selectedIndex;