//表单声明元素 <input type="text" id="comboSelect" class="input-block-level" > //定义数组,在服务端返回的数据也以该格式返回:Array[{Object},{...}] var tag_data = [ {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'}, {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'}, {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'}, {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'} ]; //showField:设置下拉列表中显示文本的列 //keyField:设置下拉列表项目中项目的KEY值,用于提交表单 //data:数据源,可以是JSON数据格式,也可以是URL //callback:选中项目后的回调函数 $('#comboSelect').bComboSelect({ showField : 'desc', keyField : 'id', data : tag_data }); ]]>
//data-init:设置列表初始被选中的项目,传递值为keyField对应的内容 <input type="text" id="comboSelect1" data-init="4" > $('#comboSelect').bComboSelect({ showField : 'desc', keyField : 'id', data : '/sys/userinfo', params : function(){return {'name':'aa','sex':1};} });
<input type="text" id="comboSelect" class="input-xlarge" > $('#comboSelect').bComboSelect({ showField : 'desc', keyField : 'id', data : tag_data, //格式化显示项目,提供源数据进行使用 formatItem : function(data){ return data.desc + '(' + data.name + ')'; } });
<input type="text" id="comboSelect" class="input-block-level" > $('#comboSelect').bComboSelect({ showField : 'desc', keyField : 'id', data : tag_data, //启用多选模式 multiple : true });
<input type="text" id="comboSelect" class="input-block-level" > $('#comboSelect').bComboSelect({ showField : 'desc', keyField : 'id', data : tag_data, multiple : true, //选中项目后的回调处理 //入参:data:选中行的原始数据对象 callback : function(data){ $('#callbackLog').append(data.desc + '(' + data.name + ')<br/>'); } });
适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。