jQuery & Objects, tentando fazer um widget leve

Question

Estou tentando criar um "controle" de seleção genérico ao qual posso adicionar elementos dinamicamente, mas estou tendo problemas para fazer as funções funcionarem corretamente.

Foi com isso que comecei.

$select = $("<select></select>");
$select.addOption = function(value,text){
  $(this).append($("<option></option>").val(value).text(text));
};

Isso funcionou bem sozinho, mas a qualquer hora $select é .clone(true)'ed o addOption() a função é perdida.

Esta é a minha abordagem de objeto, mas ainda assim a função não funciona.

function $selectX() {
  return $("<select></select>");
}

$selectX.prototype.addOption() = function(value,text){
  $(this).append($("<option></option>").val(value).text(text));
};

A solução hack é adicionar a função manualmente após a criação:

$nameSelect= new $selectX;
$nameSelect.addOption = function(value,text){
  $(this).append($("<option></option>").val(value).text(text));
};

Estou latindo para a árvore errada?

Answer 1

Para adicionar um novo método ao jQuery, você precisa usar jQuery.fn.methodName atributo, então neste caso será:

jQuery.fn.addOption = function (value, text) {
    jQuery(this).append(jQuery('<option></option>').val(value).text(text));
};

Mas tenha em mente que isso addOption estará acessível a partir do resultado de qualquer $() chamar.