singuska :: JavaScript

Criei um plugin jQuery para criar selects no DOM a partir de um vetor de dados. O código do plugin abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

(function($){
	$.fn.hhSelectMaker = function(data, cfg) {
 
		var cfg = cfg || {};
		if ( !cfg.key) cfg.key = 'key';
		if ( !cfg.value) cfg.value = 'value';
		if ( !cfg.selected) cfg.selected = false;
 
		var snippet = '';
		for (var i = 0; i < data.length; i++) {
 
			snippet += "<option value='" + data[i][cfg.key]; 
 
			if (cfg.selected === data[i][cfg.key]) {
				snippet += " selected='selected' ";
			}
 
			snippet += "'>" + data[i][cfg.value] + '</option>';
		}
		return this.append(snippet);
	};
})(jQuery);

Como funciona?

Montei dois exemplos para ilustrar o funcionamento do plugin.
O plugin recebe dois argumentos. O primeiro, obrigatório, é a fonte de dados. O segundo, opcional, é a configuração da fonte de dados.

Caso somente o primeiro argumento seja passado, o plugin espera um estrutura de dados no seguinte formato:

var dados = [
    { key: 'Chave1', value: 'Valor1' },
    { key: 'Chave2', value: 'Valor2' },
    { key: 'Chave3', value: 'Valor3' }
    // etc...
];

O nome das chaves pode ser modificado utilizando-se o segundo argumento:

$('select').hhSelectMaker(dados, {
	key: 'id', value: 'nome', selected: '5'				
});

Configurando-se o plugin desta maneira a estrutura de dados esperada é a seguinte:

var dados = [
    { id: 'Chave1', nome: 'Valor1' },
    { id: 'Chave2', nome: 'Valor2' },
    { id: 'Chave3', nome: 'Valor3' }
    // etc...
];

Além disso, a chave selected permite que um determinado valor seja selecionado como padrão após o carregamento do plugin.