Estoy usando select2 y he notado que si no hay una option proporcionada en el HTML (ignorando el espacio en blanco que se muestra a continuación para permitir que funcione el marcador de posición), no me permitirá agregar dinámicamente mi propia opción. Normalmente, cuando hay otras opciones, crea una etiqueta y la inserta en la lista de resultados.

Tengo templateResult y templateSelection para permitir la visualización de las opciones desplegables con imágenes a la izquierda de su texto de opción.

jQuery:

 $('select').select2({ placeholder: "Select or enter a {{ $itemType->itemTypeName }}", createTag: function (params) { return { id: params.term, text: params.term, newOption: true } }, templateResult: function (option) { if(!option.id) return option.text; if(option.newOption) { $result.text(option.text); $result.append(" <em>(NEW)</em>"); } else { var optimage = $(option.element).data('image'); var $optItem = '<span>'; if(optimage) $optItem += '<div style="display:inline-block; width:40px; text-align:center; margin-right:10px;"><img src="' + optimage + '" style="max-height:40px; max-width:40px; margin:0; vertical-align:middle;" /></div>'; $optItem += $(option.element).text() + '</span>'; $result = $($optItem); } return $result; }, templateSelection: function (option) { if(!option.id) { return option.text; } var image = $(option.element).data('image'); if(!image){ return option.text; } else { var $item = '<span>'; $item += '<div style="display:inline-block; width:40px; text-align:center; margin-right:10px;"><img src="' + image + '" height="40px" style="margin:0; vertical-align:middle;" /></div>'; $item += $(option.element).text() + '</span>'; return $($item); } }, tags: true, selectOnBlur: true, multiple: false });

HTML:

 <select id="itemID" name="itemID" required> <option></option> </select>

Si hay opciones que contienen datos dentro de <select> , el código jquery crea una nueva etiqueta, la función templateResult la agrega a la lista con " (NUEVO) " después, y el usuario puede seleccionar esta opción recién creada como si fuera estuvo allí todo el tiempo.

Cuando no hay opciones con datos, la función templateResult intenta ejecutar $result.text(option.text); pero falla porque todavía no existe un $result .

¿Cómo puedo crear $result cuando intento agregar una nueva opción?