仿淘宝分类选择

查看演示立即下载

插件描述：分类，种类选择实现过滤的功能性插件

2016-09-13更新

<h4>例子1</h4>
<h5>单选</h5>
<div id="demo1"></div>
<h5>单选</h5>
<div id="demo2"></div>
<h4>例子2</h4>
<div id="demo3"></div>
<div id="demo4"></div>
<h4>例子3</h4>
<div id="demo5"></div>
<div id="demo6"></div>
<h4>显示值</h4>
<input id="demo_value" type="text" value="">
<script type="text/javascript">

var data = [{
    "id": 1,
    "text": 1
},
{
    "id": 2,
    "text": 2
},
{
    "id": 3,
    "text": 3
},
{
    "id": 4,
    "text": 4
}]
//例子1
//单选
$('#demo1').comboboxfilter({
    url: '',
    scope: 'FilterQuery1',
    //分组
    data: data,
    //默认数据
    onChange: function(newValue) { //改变事件 参数为当前选择的值，单选为1个值，多选为多个值逗号分割
        $('#demo_value').val(newValue);
    }
});
$('#demo2').comboboxfilter({
    url: '',
    scope: 'FilterQuery2',
    multiple: true,
    //开启多选
    data: data,
    onChange: function(newValue) {
        $('#demo_value').val(newValue);
    }
});
$('#demo3').comboboxfilter({
    url: '',
    scope: 'FilterQuery3',
    data: data,
    onChange: function(newValue) {
        $('#demo_value').val(newValue);
    }
});
$('#demo4').comboboxfilter({
    url: '',
    scope: 'FilterQuery3',
    multiple: true,
    data: data,
    onChange: function(newValue) {
        $('#demo_value').val(newValue);
    }
});
$('#demo5').comboboxfilter({
    url: '',
    scope: '',
    unlimitText: '全部',
    data: data,
    onChange: function(newValue) {
        $('#demo_value').val(newValue);
    }
});
$('#demo6').comboboxfilter({
    url: '',
    scope: '',
    unlimitText: '全部',
    //改变全部的的Text
    multiple: true,
    data: data,
    onChange: function(newValue) {
        $('#demo_value').val(newValue);
    }
}); < /script>/

以下为默认参数可以通过$('#demo5').comboboxfilter(options)进行改变

$.fn.comboboxfilter.defaults = {
    url: '',
    //Ajax 请求地址，为空的时候数据加载默认为Data
    idField: 'id',
    //数据对象的值字段
    textField: 'text',
    //数据对象的文本字段
    scope: 'FilterQuery',
    //分组，可以设置为空
    multiple: false,
    //多选，默认单选
    data: [],
    //默认数据，当url 不为空时候Data 无效
    inputName: '',
    unlimit: true,
    //是否显示不限，默认显示
    unlimitText: '不限',
    param: {},
    //Ajax 请求的参数
    onClick: function(itemData) {},
    //单击事件，当前点击documnet对象对应的数据对象
    onChange: function(newValue) {},
    //值改变事件 参数为当前已经选择的全部值
    onLoadSuccess: function(data) {},
    //加载完成事件 参数为全部数据
    onError: function(e) {} //加载错误事件
};

以下提供的为方法

$('#id').comboboxfilter('setValue',{id:1,text:'1t'}) //单选  为插件赋值
$('#id').comboboxfilter('setValues',[{id:1,text:'1t'},{id:w,text:'wt'}]) //多选  为插件赋值
$('#id').comboboxfilter('loadData',[{id:1,text:'1t'},{id:w,text:'wt'}]) //让插件加载静态数据
$('#id').comboboxfilter('load',options) //让插件重新加载数据，options为改变上次的值
$('#id').comboboxfilter('reload') //让插件重新加载数据,参数完全不改变
$('#id').comboboxfilter('getValue') //获取当前已经选择的值，

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery 实现流程进度显示
下一个特效： html5读取二维码