A-A+
jquery 表单下拉框(select)美化增加强版示例
下拉框美化我们会看到很多的实现方法，用到最多的是js来模仿select下拉框了，下面一聚小编来为各位介绍一下吧。
在前几篇中有分享Jquery Select2的文章，Select2是一个基于jQuery的替代选择框。 它支持搜索、远程数据集和无限滚动的结果。
今天继续分享一下Select2的使用。
1、Select2绑定事件
主要能用到事件有select数据绑定时、打开时、关闭时,代码如下:
- $("#selectsq").select2();
- $("#selectsq").on("change", function (e) { ToggleProductList();})
在ToggleProductList函数中，可以判断是否选择正确的数据：
IT分享Jquery select美化增加版Select2使用,代码如下:
- function Getselect2ID(idd) {
- var data = $("#" + idd).select2("data");
- var datastring = "";
- $.each(data, function (key, val) {
- datastring = datastring + val.id + ",";
- });
- return datastring;
- }
- function ToggleProductList() {
- var sqlist = Getselect2ID("selectsq");
- if (sqlist.length > 0) {
- $("#divselectProduct").show();
- }
- else {
- $("#divselectProduct").hide();
- }
- }
- var data = $("#" + idd).select2("data")是获取select选中的数据
2、支持多选
类似上面图示的多tags选择，只要定义属性multiple=""就行,代码如下:
- <select multiple="" name="selectsq" id="selectsq" style="width:300px" class="populate select2-offscreen" tabindex="-1">
3、动态绑定数据，这个可以采用获取数据，组织html的方式，也可以采用Select2自带的ajax方式获取,代码如下:
- function GetCityData() {
- var cityId = GetCity();
- $.ajax({
- type: "post",
- dataType: 'json',
- url: ajaxUrl,
- data: {
- Operate: "searchcitydata",
- txtsqname: $("#txtsqname").val(),
- txtspname: $("#txtspname").val(),
- txtsjname: $("#txtsjname").val(),
- CityId: cityId
- },
- success: function (data, textStatus) {
- if (data != null) {
- var model = eval(data);
- if (model != null && model != "undefined") {
- //selectsq
- var html = '';
- $.each(model.ListSQ, function (key, val) {
- htmlhtml = html + ' <option value="' + val.Id + '">' + val.Name + '</option>';
- });
- $("#selectsq").append(html);
- }
- else {
- alert("加载数据失败！"); return;
- }
- }
- },
- complete: function (XMLHttpRequest, textStatus) {
- },
- error: function (e) {
- alert("加载数据错误！"); return;
- }
- });
- }