Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

134
Vistas
Select 2 js adding actions on new option

I use Select 2 in my form where the option data in it I take from the database and I also add an "add new" button when the searched keyword is not in the database. what I want to ask is, what kind of way can I do to be able to create an action from the button. for example when the button is clicked I can display a text field.

For illustration, here is my code:

$('#add_penilai').select2({
       placeholder: 'Change Name',
       tags : true,
         createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
   templateResult: function (data) {
    var $result = $("<span></span>");
    $result.text(data.text);
    if (data.newOption) {
      $result.append(`<button type="button"
            class="btn btn-secondary btn-sm ml-10" 
            onClick='Show()'> + Add New Item</button>`);
    }
    return $result;
  },
        escapeMarkup: function (markup) {
            return markup;
        }
    });
.form-control.form-control-hide {
  display: none;
}
<select class="form-control select2" id="add_penilai" name="nama_penilai" onchange="isi_otomatis()" data-width="100%">
     <option value="Jhony">Jhony</option>
     <option value="Kyra">Kyra</option>
     <option value="Ronald">Ronald</option>
 </select>
 
 <input class="form-control form-control-hide" type="text" id="divisi" name="nama_instansi" />

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda