Een tekstinvoer converteren naar een select element met JavaScript

Ik doe wat front-end ontwikkeling op een gehost e-commerce platform. Het systeem stuurt een tekstinvoer voor de klant om het aantal items te kiezen dat hij aan zijn winkelwagentje wil toevoegen, maar ik zou liever een selecte kiezen. Ik heb geen toegang tot de markeringen die het systeem in dit opzicht uitspuugt, dus ik wil JavaScript gebruiken om de tekst invoer te wijzigen in een selecteer -element.

Ik heb jQuery gebruikt om de selectie te verwijderen en het invoerelement te dupliceren met een selectie met de juiste keuzes, maar wanneer ik iets aan mijn winkelwagen probeer toe te voegen, wordt er maar één item toegevoegd, ongeacht de keuze in de selectie.

Dit is de native markup:

<div id="buy-buttons">
  
  <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>

Dit is het jQuery dat ik gebruik om mijn markup te updaten.

 $("#txtQuantity").remove();
 $("#buy-buttons").append('');
 $("#txtQuantity").append('');

Weet iemand waarom dit niet werkt? Moet de geselecteerde informatie niet op dezelfde manier door het formulier worden verzonden als de tekstinvoer?

Bedankt!

12

4 antwoord

Use replaceWith instead of remove and append. Also the type attribute on the . Here's the docs on replaceWith - http://api.jquery.com/replaceWith/.

$("#txtQuantity")
    .replaceWith('');
26
toegevoegd
Bedankt, ik wist niet van deze jQuery-methode.
toegevoegd de auteur John, de bron

U hebt de veldnaam niet ingesteld. Voeg name = 'txtQuantity' toe aan de selectie. Zonder een naamattribuut wordt de waarde van het veld niet teruggeplaatst naar de server.

Ook in plaats van value = '1' in te stellen op de selectie (die niets doet), voegt u selected = 'selected' toe aan de eerste optie. Het resultaat is hetzelfde als standaard is de eerste optie geselecteerd.

Waarschijnlijk krijg je de selectie na de verzendknop met de bovenstaande code. Dat is echter in een ander antwoord behandeld.

5
toegevoegd
Bedankt! Ik weet niet zeker of ik dat kenmerk heb gemist.
toegevoegd de auteur John, de bron

Remove the type and value attributes from the