jQuery & Objects, intentando hacer un widget ligero

Question

Intento crear un "control" de selección genérico al que pueda agregar elementos dinámicamente, pero tengo problemas para que las funciones funcionen correctamente.

Esto es con lo que comencé.

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

Esto funcionó bien solo pero en cualquier momento. $select es .clone(true)'ed el addOption() Se pierde la función.

Este es mi enfoque de objetos pero aún así la función no funciona.

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

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

La solución de pirateo es agregar la función manualmente después de la creación:

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

¿Estoy ladrando al árbol equivocado?

Answer 1

Para agregar un nuevo método a jQuery, debes usar jQuery.fn.methodName atributo, por lo que en este caso será:

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

Pero ten en cuenta que esto addOption será accesible desde el resultado de cualquier $() llamar.