es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Convertir un campo de texto a una lista desplegable con jQuery.

17 Jul, 2023 Programación

Tengo los siguientes códigos HTML:

<div class="notesrow" id="notesrow_8">
<label for="holdnotes_8">Notas de reserva:</label>
<textarea id="holdnotes_8" rows="2" cols="30" name="notes_8"></textarea>
</div>

Quiero convertirlo en un dropdown select con los siguientes valores:

Para recoger
Para escanear
Para mensajero

Estoy revisando esto en https://stackoverflow.com/questions/42505629/jquery-convert-textarea-separated-by-new-lines-to-select-option-menu, pero no puedo hacerlo funcionar para mi caso de uso.

El código que estoy intentando es el siguiente:

$('[id^=holdnotes_]').html('<select name="resnote" id="resnote" form="resnoteform"><option value="For Scanning">Para escanear</option><option value="For Pick-up">Para recoger</option><option value="For courier">Para mensajero</option></select>');

El problema es que el texto solo se está metiendo dentro de la etiqueta textarea. ¿Cómo convierto mi textarea en una lista desplegable usando jQuery?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para convertir el área de texto en una lista desplegable usando jQuery, debes eliminar el área de texto existente y crear un nuevo elemento select con las opciones que deseas. Aquí tienes un fragmento de código actualizado que debería funcionar para tu caso de uso:

    $('[id^=holdnotes_]').each(function() {
  var options = ['Para Escaneo', 'Para Recogida', 'Para Mensajería'];
  var select = $('<select name="resnote" id="resnote" form="resnoteform"></select>');
  $.each(options, function(index, value) {
    select.append('<option value="' + value + '">' + value + '</option>');
  });
  $(this).replaceWith(select);
});

    Este código selecciona todos los elementos con un ID que comienza con holdnotes_, recorre cada elemento, crea un nuevo elemento select con opciones del array options y reemplaza el elemento existente con el nuevo elemento select. La lista desplegable resultante deberá tener el nombre resnote, el ID resnote y el formulario resnoteform, con opciones para escaneo, recogida y mensajería.

Comments are closed.