使用js动态筛选select控件中符合条件的选项

有这样一个需求，就是在jsp的下拉菜单的旁边有一个搜索框，在下拉菜单中选项较多时可以采用搜索框来迅速找到相应的内容。

实现方法：

         1.在搜索框中输入内容。

          2.当搜索框中的内容改变时触发搜索框的oninput( )事件，执行相应的函数。

具体代码展示如下：

         1.jsp代码

<select id="brand">
	<option>---请选择---</option>
    <option>中国</option>
    <option>俄罗斯</option>
    <option>加拿大</option>
    <option>美国</option>
</select>
<input id="findBrand" type="text" value = "" placeholder="在此搜索" oninput="linkBrands()">

       2.js代码

function linkBrands(){
        //获取搜索框的内容
	var name = $("#findBrand").val();
        //获取下拉菜单的所有选项
	var getSelect = $("#brand option");
        //当搜索框的内容为空时，下拉菜单的选项设置为包含所有选项，并结束
	if(name == null || name == ""){
		getSelect.each(function(i,get){
			$(get).show();
		});
		return;
	}
       //当搜索框内容不为空时，遍历整个下拉菜单的选项
	getSelect.each(function(i,get){
                //当下拉菜单每一条选项的text()属性（即显示的值）包含搜索框的内容时，保留该条选选项
		if($(get).text().indexOf(name) > -1){
			$(get).show();
		}else{
               //当不包含搜索框的内容时，隐藏该条选选项（选项仍存在，只是不可见）
			$(get).hide();
		}
	});
}