如何以表格的形式輸入購物車的內容作爲輸入

Question

如何將表單中的「shoppingCart」選項捕獲爲輸入「formdesc」？

示例：<ol id="shoppingCart" name="formdesc"></ol>不起作用。

HTML：

... 
<select id="apparelType"> 
    <option selected="selected" value="na">Select</option> 
    <option value="0">T-Shirt</option> 
    <option value="1">Shorts</option> 
    <option value="2">Hat</option> 
    <option value="3">Bag</option> 
</select> 

<label for="numb">Total: <span>$</span></label> 
<input id="numb" type="number" name="formbal" value="0.00" /> 
<input id="pretaxTotal" type="hidden" value="0.00" /> 
<ol id="shoppingCart"></ol> 
</form> 

JS：

<script type="text/javascript"> 

    $('#apparelType').change(function(){ 
     var apparelType = $('#apparelType'); 
     var fmapVal = apparelType.val(); 

     if (fmapVal == 'na') { 
      alert('Please select an apparel type.'); 
     } else { 
      var appVal = [ 15, 20, 25, 30 ]; 
      var description = apparelType.find('option:selected').text(); 
      var cost = appVal[fmapVal]; 

      var pretaxTotal = parseInt($('#pretaxTotal').val()); 
      var subtotal = pretaxTotal + cost; 
      var updatedTotal = (subtotal * 1.06).toFixed(2); 

      $('#pretaxTotal').val(subtotal); 
      $('#numb').val(updatedTotal); 

      $('#shoppingCart').append('<li>' + description + '</li>'); 
     } 
    }); 

</script> 

Answer 1

你可以讓另一隱藏字段的形式，並且每次做出選擇，你可以添加值（0 -3）到隱藏字段併爲每個項目添加分隔符。以便該字段包含此類0;3;1;2;3;。稍後，您可以在接收表單數據的代碼中再次分割。

在你的HTML，它會是這個樣子：

<input id="techCart" type="hidden" value = ""/> 

而在你的JS，你可以添加：

$('#techCart').val($('#techCart').val() + ":" + apparelType.val()); 

在你的其他部分的結尾。

請參閱http://jsfiddle.net/5frXU/1/進行快速測試。