使用JavaScript將文本輸入轉換爲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>');

有誰知道爲什麼這不起作用？不應該通過表單以與文本輸入相同的方式提交信息嗎？

謝謝！

來源

2012-06-23 John

您尚未設置字段名稱。添加name='txtQuantity'到選擇。如果沒有名稱屬性，該字段的值將不會被髮回服務器。

而不是設置value='1'上的選擇（這沒有做任何事情），添加selected='selected'到第一個選項。結果與默認情況下相同，第一個選項被選中。

您大概與上面的代碼提交按鈕後，結束了選擇。但是，在另一個答案中已經介紹了這一點

來源

2012-06-23 17:53:01

謝謝！不知道我錯過了這個屬性。 – John

使用replaceWith而不是remove和append。此外，<select>上的type屬性是不必要的，並且<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>');

來源

2012-06-23 17:51:15

謝謝，不知道這jQuery的方法。 – John

從<select>取出type和value屬性，並添加你離開了name="txtQuantity"屬性。

來源

2012-06-23 17:51:22

如果你已經有一個下拉/選擇列表，你只是想一個項目從標籤/文本框添加到它，那麼你可以試試這個：

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

來源

2012-06-23 18:15:17 Vishal

使用JavaScript將文本輸入轉換爲select元素

回答

相關問題