html下拉列表 带图标,带图标的jQuery自定义下拉框插件

这是一款带图标的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

});