Convertir una entrada de texto a un elemento de selección con JavaScript

Question

Estoy haciendo un desarrollo de front-end en una plataforma de comercio electrónico alojado. El sistema envía una entrada de texto para que el cliente elija la cantidad de artículos que desea agregar a su carrito, pero yo preferiría seleccionar. No tengo acceso al marcado que el sistema escupe en este sentido, por lo que me gustaría usar JavaScript para cambiar el texto entrada a un elemento seleccionar elemento.

Utilicé jQuery para eliminar la selección y duplicar el elemento de entrada con una selección con las opciones correctas, pero cuando intento agregar algo a mi carrito, solo se agrega un elemento, independientemente de la elección en la selección.

Aquí está el marcado orígenes:

<div id="buy-buttons"> 
    <label>Quantity:</label> 
    <input name="txtQuantity" type="text" value="1" id="txtQuantity" class="ProductDetailsQuantityTextBox"> 
    <input type="submit" name="btnAddToCart" value="Add To Cart" id="btnAddToCart" class="ProductDetailsAddToCartButton ThemeButton AddToCartThemeButton ProductDetailsAddToCartThemeButton"> 
</div> 

Aquí está el jQuery Estoy corriendo para actualizar mi margen de beneficio.

$("#txtQuantity").remove(); 
$("#buy-buttons").append('<select id="txtQuantity" type="text" value="1" class="ProductDetailsQuantityTextBox"></select>'); 
$("#txtQuantity").append('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>'); 

¿Alguien sabe por qué esto no está funcionando? ¿No debería el seleccionado enviar la información a través del formulario de la misma forma que la entrada de texto?

Gracias!

Answer 1

No ha configurado el nombre del campo. Agregue name='txtQuantity' a la selección. Sin un atributo de nombre, el valor del campo no se publicará en el servidor.

Además, en lugar de configurar value='1' en la selección (que no está haciendo nada), agregue selected='selected' a la primera opción. El resultado es el mismo que por defecto se selecciona la primera opción.

Supuestamente termina con el botón Seleccionar después del envío con el código anterior. Sin embargo, eso ha sido cubierto en otra respuesta.

Answer 2

Use replaceWith en lugar de remove y append. Además, el atributo type en el <select> es innecesario y los nodos <option> deben estar dentro del <select>. Aquí están los documentos en replaceWith - http://api.jquery.com/replaceWith/.

$("#txtQuantity") 
    .replaceWith('<select id="txtQuantity" name="txtQuantity" class="ProductDetailsQuantityTextBox">' + 
      '<option value="1">1</option>' + 
      '<option value="2">2</option>' + 
      '<option value="3">3</option>' + 
      '<option value="4">4</option>' + 
      '<option value="5">5</option>' + 
     '</select>'); 

Answer 3

Retire los type y value atributos de la <select>, y añadir el atributo name="txtQuantity" que quede fuera.

Answer 4

Si ya tiene un desplegable/lista de selección y lo que desea es añadir un elemento a la misma desde una etiqueta/cuadro de texto a continuación, puede probar esto:

if ($(textBoxID).val() != '') { 
       $(dropDownID) 
        .append($("<option></option>") 
         .attr('value', ($(textBoxID).val())) 
          .text($(textBoxID).val())).val($(textBoxID).val()) 
}