JQuery 对select中的option进行过滤，
提示：html中 没有对select中option属性的隐藏功能，所以只能将option个删除 和添加这样的操作
直接上代码：第一种方式
需要导入jquery
<html>
<head>
<title>不刷新页面jQuery模糊搜索，第一种实现---动态删除、插入节点 </title>
<script src="jquery-1.4.4.min.js" language="javascript"></script>
<script type="text/javascript">
function idChange(obj) {
$("#select").val(obj.value.trim());
}
function inputChange(obj) {
indexOfKeyWord(obj.value.trim());
}
//根据给的word搜索
function indexOfKeyWord(word){
//显示的下拉框的值vlaue数组
var arrayVal=$("#select option").map(function(){return $(this).val();});
//显示的下拉框的text数组
var arrayText=$("#select option").map(function(){return $(this).text();});
//隐藏的下拉框的值的数组
var arrayVal_hidden=$("#select_hidden option").map(function(){return $(this).val();});
//显示的下拉框的text数组
var arrayText_hidden=$("#select_hidden option").map(function(){return $(this).text();});
for(var i=0;i<arrayText.length;i++){
if(arrayText[i].indexOf(word)==-1){
$("#select option[value='"+arrayVal[i]+"']").remove();
$("#select_hidden").append("<option value='" +arrayVal[i] + "'>"+arrayText[i]+"</option>"); //为Select追加一个Option(下拉项)
}
}
for(var j=0;j<arrayText_hidden.length;j++){
if(arrayText_hidden[j].indexOf(word) != -1){
$("#select_hidden option[value='"+arrayVal_hidden[j]+"']").remove();
$("#select").append("<option value='" + arrayVal_hidden[j] + "'>"+arrayText_hidden[j]+"</option>"); //为Select追加一个Option(下拉项)
}
}
}
</script>
</head>
<body>
<form id="form1">
<table class="searchContent">
<tr>
<td>
<label style="float:left">
下拉列表：
</label>
<select id="select" name="status" >
<option value="8741">囧西游</option>
<option value="8742">囧西游1</option>
<option value="8743">囧西游12</option>
<option value="8744">囧西游123</option>
<option value="8731">三界封神123</option>
<option value="8732">三界封神12</option>
<option value="8733">三界封神1</option>
<option value="8734">三界封神</option>
<option selected="selected" value="872">神谕</option>
<option value="871">搜神记</option>
<option value="8711">搜神记0</option>
<option value="8712">搜神记11</option>
<option value="8713">搜神记44</option>
<option value="870">王国印记</option>
<option value="869">寻将Online</option>
<option value="868">宠物风暴</option>
<option value="867">仙魔道OL</option>
</select>
<select id="select_hidden" style="display:none"></select>
</td>
<td>根据ID精确查找：<input type="text" size="5" οnchange="idChange(this)" /></td>
<td>根据名称模糊查找：<input id="serachinput" type="text" οnchange="inputChange(this)"/></td>
</tr>
</table>
</form>
</body>
</html>
在firefox中测试过。其它的自行测试
//这个也是去下拉框所有选项的text的值的方法，返回一个数组
var array=$("#selectId").text().split(",");
这个方法可以对js中的字符串截取
substring(0,3);
slice(0,5)
你可能会用到
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
