10
09/2014
selectize js
selectize 和 select2 类似。
根据 input value 生成 selectize
<input id="slz1" type="text" value="郭爽,共扫">
jQuery(function($){
$('#slz1').selectize();
});
根据 select multiple 生成 selectize
当前值：
<p style="padding:10px 0;">当前值：<input id="slz2-input" style="font-size:1em;padding:3px 5px;" /></p>
<select id="slz2" multiple><option value="shaanxi" selected>陕西</option><option value="beijing">北京</option><option value="henan">河南</option><option value="shanxi">山西</option><option value="hebei">河北</option></select>
jQuery(function($){
$('#slz2').selectize({
dropdownParent: 'body',
maxItems: 3,
// onChange: function(v){
// console.log(v);
// }
}).on('change',function(){
$('#slz2-input').val($(this).val());
})
})
两种 change 都可以；maxItems 最多选择数量；dropdownParent: ‘body’ DOM 在 body 标签，避免被 position:relative;overflow:hidden 的元素 盖住！
js 生成 select option
当前值：
<p style="padding:10px 0;">当前值：<input id="slz3-input" style="font-size:1em;padding:3px 5px;" /></p>
<input id="slz3" type="text" value="">
jQuery(function($){
$('#slz3').selectize({
valueField: 'id',
labelField: 'title',
searchField: 'id',
options:[
{id:11,title:'科学家',url:'#1'},
{id:22,title:'歌唱家',url:'#1'},
{id:33,title:'前端',url:'#1'},
{id:44,title:'程序员',url:'#1'}
],
create: true
}).on('change',function(){
$('#slz3-input').val($(this).val());
});
});
select 单选 js 控制
山西台湾
selectize 自定义
$('#slz5').selectize({
delimiter: ',',
dropdownParent: 'body',
valueField: 'title',
searchField: 'title',
options:[
{title:'search'},
{title:'home'},
{title:'heart'},
{title:'film'},
{title:'off'},
{title:'user'}
],
render:{
option:function(data){
return '<div class="option"><i class="icon-'+data.title+'"></i> <span class="title">'+data.title+'</span></div>';
},
item:function(data){
return '<div class="item"><i class="icon-'+data.title+'"></i> '+data.title+'</div>';
}
},
create:function(input){
return {title:input}
}
});
更多说明
- standalone 不需要 jquery 的版本。
- selectize.css — Core styles
- selectize.default.css — Default theme (with core styles)
- ie8 需要
<!--[if lt IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script><![endif]-->
- 可以跑 grunt
- $(‘#select-locked’)[0].selectize.lock() 锁定（类似 disabled）