jQuery chosen下拉框检索

参考URL:参考demo


chosen.jquery.js 搜索框只能从头匹配的解决思路+方法  (改参数=推荐)

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;" οnchange="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" οnchange="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);  
}




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值