jQuery chosen下拉框检索

来源：互联网发布：数学建模算法与应用pdf 编辑：程序博客网时间：2024/06/05 01:20

参考URL：参考1

chosen.jquery.js 搜索框只能从头匹配的解决思路+方法（改源码，，，有其他方式的。。。）

官方API及JS下载

效果图：

这里提供一下简单版的下载地址（JS源码已改为模糊匹配），类似上图的效果，自行导入jQuery,注意修改CSS文件中的图片路径为导入的图片

<%@include file="import.jsp" %><link rel="stylesheet" type="text/css" href="${ctx }/scripts/chosen.css">  <select name="dept" style="width: 150px;" id="dept" class="dept_select">     <option value="部门1">部门1</option>    <option value="部门2">部门2</option>    <option value="部门3">部门3</option>    <option value="部门4">部门4</option>    <option value="部门5">部门5</option></select>   <script type="text/javascript" src='${ctx }/scripts/chosen.jquery.js'></script>    <script type="text/javascript">     $('.dept_select').chosen();    </script>

动态下拉框

注意：$('#cnaps_name_select').trigger(“chosen:updated”);//重置下拉框
$('#cnaps_name_select').chosen();//下拉框检索框架

<td  class="td_right">所属银行:</td>  <td>  <select name="bank_code" id="bank_code" class="input-text lh30" style="width: 150px;" onchange="cnapsChange()">  <option value=""></option>   <c:forEach items="${bankls}" var="item" varStatus="status">  <option value="${item.bankcode }" <c:out value="${agent.bank_code eq item.bankcode?'selected':'' }" />>${item.bankname }</option>   </c:forEach>  </select>                                       <input type="hidden" id="bank_name" name="bank_name" value="${agent.bank_name }"   />                                    </td>         <td class="td_right">开户行全称：</td>  <td>  <select type="text" id="cnaps_name_select" name="cnaps_name_select"  class="input-text lh30" onchange="cnapsNameChange()"    style="width: 324px;" ></select>  <input type="hidden" id="cnaps_name" name="cnaps_name" value="${agent.cnaps_name }"   />  </td>        function cnapsChange() {      var account_city = $('#account_city').val();      var bank_code = $('#bank_code').val();            var cnaps_no = $("#cnaps_no").val();      $('#cnaps_name_select').val('');      var obj=document.getElementById("cnaps_name_select");      obj.options.length=0;      $.ajax({          url:  ctx()+"/cnaps/cnapsBank?clscode=" + bank_code+"&citycode="+account_city,          dataType: "json",          success: function(data) {              obj.options.add(new Option('',''));              $.each(data.banklist, function(i, val) {                  obj.options.add(new Option(val.BNKNAME,val.CNAPS));                 if (cnaps_no == val.CNAPS) {                                    $("#cnaps_name_select").val(cnaps_no);                                     cnapsNameChange();                  }              });              $('#cnaps_name_select').trigger("chosen:updated");//重置下拉框              $('#cnaps_name_select').chosen();//下拉框检索框架          }      });  }    function cnapsNameChange() {      var cnaps_name_select = $('#cnaps_name_select').val();      var cnaps_name = $("#cnaps_name_select").find("option:selected").text();      var bank_name = $("#bank_code").find("option:selected").text();  //  alert("cnaps_name_select："+cnaps_name_select);      $("#cnaps_no").val(cnaps_name_select);      $("#cnaps_name").val(cnaps_name);      $("#bank_name").val(bank_name);  }

拓展url:http://www.jb51.net/article/107703.htm

阅读全文

0 0