这是第二种方式：不用刷新页面，直接就能对下拉列表中的选项进行筛选
在firefox中测试过
<html>
<head><title>不刷新页面jQuery模糊搜索，第二种实现---js全局变量存储数据</title>
<script src="jquery-1.4.4.min.js" language="javascript"></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>
</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>
<script type="text/javascript">
//显示的下拉框的值vlaue数组
var arrayVal=$("#select option").map(function(){return $(this).val();});
//显示的下拉框的text数组
var arrayText=$("#select option").map(function(){return $(this).text();});
function idChange(obj) {
$("#select").val(obj.value.trim());
}
function inputChange(obj) {
indexOfKeyWord(obj.value.trim());
}
//根据给的word搜索
function indexOfKeyWord(word){
$("#select").empty();
for(var i=0;i<arrayText.length;i++){
if(arrayText[i].indexOf(word)!=-1){
$("#select").append("<option value='" +arrayVal[i] + "'>"+arrayText[i]+"</option>"); //为Select追加一个Option(下拉项)
}
}
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
