这是一款带图标的jQuery自定义下拉框插件。该jquery插件可以动js代码中动态渲染下拉框的选项,生成带图标的下拉框选项,非常实用。
使用方法
在页面中引入customSelect.jquery.css、jquery和customSelect.jquery.min.js文件。
HTML结构
实用元素来作为下拉框的容器。
初始化插件
在页面DOM元素加完毕之后,通过下面的方法来初始化插件。
var myOptions = [
['ct', 'ct.png', 'Catalonia'],
['es', 'es.png', 'Spain'],
['gb', 'gb.png', 'Great Britain'],
['de', 'de.png', 'Germany'],
['it', 'it.png', 'Italy'],
['fi', 'fi.png', 'Finland'],
['fr', 'fr.png', 'France']
],
var myTemplate = "
$2
"
配置参数
该jQuery自定义下拉框插件的可用配置参数有:
$.customSelect({
identifier: 'demo',
selector: '#countrySelect',
placeholder: 'Select your country',
options: myOptions,
template: myTemplate
});