Преобразование текстового ввода в элемент select с использованием JavaScript

Я занимаюсь разработкой интерфейса на платформе электронной коммерции. Система отправляет текстовый ввод для клиента, чтобы выбрать количество предметов, которые они хотят добавить в свою корзину, но я бы предпочел выбрать. У меня нет доступа к разметке, которую система выплевывает в этом отношении, поэтому я хотел бы использовать JavaScript для изменения ввода текста в элемент select.

Я использовал jQuery для удаления выбора и дублирования элемента ввода с помощью выбора с правильными выборами, но когда я пытаюсь добавить что-то в свою корзину, добавляется только один элемент, независимо от выбора в выборе.

Здесь нативная разметка:

<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>

Здесь jQuery я запускаю обновление моей разметки.

 $("#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>');

Кто-нибудь знает, почему это не работает? Не следует ли, чтобы выбор отправлял информацию через форму так же, как и ввод текста?

Спасибо!

Ответы

Ответ 1

Вы не указали имя поля. Добавьте name='txtQuantity' к выбору. Без атрибута name значение поля не будет отправлено обратно на сервер.

Кроме того, вместо того, чтобы устанавливать value='1' в select (который ничего не делает), добавьте selected='selected' к первому варианту. Результат такой же, как и по умолчанию выбрана первая опция.

Предполагается, что вы закончите с выбором после кнопки отправки с указанным выше кодом. Однако это было рассмотрено в другом ответе.

Ответ 2

Используйте replaceWith вместо remove и append. Кроме того, атрибут type на <select> не нужен, а узлы <option> должны находиться в пределах <select>. Здесь документы на 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>');

Ответ 3

Удалите атрибуты type и value из <select> и добавьте атрибут name="txtQuantity", который вы оставили.

Ответ 4

Если у вас уже есть выпадающий список/список, и вы просто хотите добавить элемент к нему из метки/текстового поля, вы можете попробовать следующее:

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