JQuery搜索select里面的值

yaofang123

1. <div class="search">
   
2. <input type="text" id="Jmytext" value=""/>
   
3. </div>
4.  <select id="fb_list" multiple="multiple" class="search_locate" name="baseos">
   
5.  <option value="aaaabbbbbb">aaaabbbbbb</option>
6. <option value="ccccccccccddddddd">ccccccccccddddddd</option>
   
7.  <option value="eeeeeeeeeefffffffffff">eeeeeeeeeefffffffffff</option>
   
8.  <option value="pam-devel-0.99.6.2-6.el5.x86_04">pam-devel-0.99.6.2-6.el5.x86_04</option>
   
9.   <option value="pam-devel-0.99.6.2-6.el5.x86_05">pam-devel-0.99.6.2-6.el5.x86_05</option>
   
10.  <option value="pam-devel-0.99.6.2-6.el5.x86_06">pam-devel-0.99.6.2-6.el5.x86_06</option>
    
11.  </select>

实现的原理

1. 定义全局数组存放最初的数据

2. 触发onchange事件如果有发生就调用

<script language="JavaScript"> 

String.prototype.Trim = function() { 

   return this.replace(/(^\s*)|(\s*$)/g, ""); 

}

//声明两个全局的变量分别存放左与右侧的数据

var leftSelectData = [];

$(document).ready(function () {

if(navigator.userAgent.indexOf("MSIE")>0){ 

document.getElementById('Jmytext').attachEvent("onpropertychange",txChange); 

document.getElementById('Jothertext').attachEvent("onpropertychange",txChange2); 

}else{

document.getElementById('Jmytext').addEventListener("input",txChange,false);

document.getElementById('Jothertext').addEventListener("input",txChange2,false);

}

//将原来的数据先保存到一个数组里面

$("select[@name=baseos] option").each(function(){ 

leftSelectData.push($(this).val());

}); 

});

  

function txChange(){ 

var content = $("#Jmytext").val().Trim();

//先清空掉原来的数据

$("#fb_list").empty();  

//判断如果关键字为空的话就提取全部

if(content==''){

$.each(leftSelectData,function(n,value) {

$("#fb_list").append('<option value="'+value+'">'+value+'</option>');

  });

} else {

//如果不为空就通过关键字重新搜索

var reg = new RegExp(content,'i');

$.each(leftSelectData,function(n,value) {

if(reg.test(value)){

$("#fb_list").append('<option value="'+value+'">'+value+'</option>');

}

  });

}

} 

function txChange2(){ 

alert("testfirefox"); 

} 

</script>