A-A+

jquery 表单下拉框(select)美化增加强版示例

2016年01月07日 web前端设计 暂无评论 阅读 5 views 次

下拉框美化我们会看到很多的实现方法,用到最多的是js来模仿select下拉框了,下面一聚小编来为各位介绍一下吧。
在前几篇中有分享Jquery Select2的文章,Select2是一个基于jQuery的替代选择框。 它支持搜索、远程数据集和无限滚动的结果。

今天继续分享一下Select2的使用。

1、Select2绑定事件

主要能用到事件有select数据绑定时、打开时、关闭时,代码如下:

  1. $("#selectsq").select2();  
  2.     $("#selectsq").on("change"function (e) { ToggleProductList();})  

在ToggleProductList函数中,可以判断是否选择正确的数据:

IT分享Jquery select美化增加版Select2使用,代码如下:

  1. function Getselect2ID(idd) {  
  2.     var data = $("#" + idd).select2("data");  
  3.     var datastring = "";  
  4.     $.each(data, function (key, val) {  
  5.         datastring = datastring + val.id + ",";  
  6.     });  
  7.     return datastring;  
  8. }  
  9. function ToggleProductList() {  
  10.     var sqlist = Getselect2ID("selectsq");  
  11.     if (sqlist.length > 0) {   
  12.         $("#divselectProduct").show();  
  13.          
  14.     }  
  15.     else {  
  16.         $("#divselectProduct").hide();  
  17.     }  
  18. }  
  19. var data = $("#" + idd).select2("data")是获取select选中的数据  

2、支持多选

类似上面图示的多tags选择,只要定义属性multiple=""就行,代码如下:

  1. <select multiple="" name="selectsq" id="selectsq" style="width:300px" class="populate select2-offscreen" tabindex="-1">  

3、动态绑定数据,这个可以采用获取数据,组织html的方式,也可以采用Select2自带的ajax方式获取,代码如下:

  1. function GetCityData() {    
  2.         var cityId = GetCity();   
  3.         $.ajax({  
  4.             type: "post",  
  5.             dataType: 'json',  
  6.             url: ajaxUrl,  
  7.             data: {   
  8.                 Operate: "searchcitydata",  
  9.                 txtsqname: $("#txtsqname").val(),  
  10.                 txtspname: $("#txtspname").val(),  
  11.                 txtsjname: $("#txtsjname").val(),  
  12.                 CityId: cityId  
  13.             },  
  14.             success: function (data, textStatus) {  
  15.                 if (data != null) {  
  16.                     var model = eval(data);  
  17.                     if (model != null && model != "undefined") {  
  18.                         //selectsq  
  19.                         var html = '';  
  20.                         $.each(model.ListSQ, function (key, val) {  
  21.                                 
  22.                             htmlhtml = html + '    <option value="' + val.Id + '">' + val.Name + '</option>';  
  23.                         });  
  24.                         $("#selectsq").append(html);   
  25.                     }  
  26.                     else {  
  27.                         alert("加载数据失败!"); return;  
  28.                     }  
  29.                 }  
  30.             },  
  31.             complete: function (XMLHttpRequest, textStatus) {  
  32.             },  
  33.             error: function (e) {  
  34.                 alert("加载数据错误!"); return;  
  35.             }  
  36.         });  
  37. }  
标签:

给我留言