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.

1
2
3
4
5

$('a').click(function(){
    var href = $(this).attr('href');
    window.open(href);
    return false;
});

Este exemplo em jQuery, se executado, fará com que todos os links desta página sejam abertos em uma nova guia. O return false na linha 4 serve para barrar o evento padrão do link. Se o return for omitido, o destino do link vai ser aberto em uma nova guia e também na página atual.

preventDefault: uma alternativa mais elegante

Descobri recentemente o método preventDefault que acaba sendo muito mais prático e menos sujo do que o return false:

1
2
3
4
5

$('a').click(function(event){
    event.preventDefault();
    var href = $(this).attr('href');
    window.open(href);
});

Além de fazer muito mais sentido do que o return, preventDefault pode ser colocado em qualquer parte do evento, não interrompendo o fluxo da função.