jquery选项：选中不工作

Question

我试图从颜色中选择选项，但每次都返回空白。当它添加到汽车后，它会返回到购物车页面，它会返回空白，而不是所选的颜色选项。

// Adds items to the shopping cart 
 

 
handleAddToCartForm: function() { 
 
    var self = this; 
 
    self.$formAddToCart.each(function() { 
 
    var $form = $(this); 
 
    var $product = $form.parent(); 
 
    var price = self._convertString($product.data("price")); 
 
    var name = $product.data("name"); 
 
    
 
    //Problem here 
 
    var color1 = $("#color1 option:selected").val(); 
 

 
    $form.on("submit", function() { 
 
     var qty = self._convertString($form.find(".qty").val()); 
 
     var subTotal = qty * price; 
 
     var total = self._convertString(self.storage.getItem(self.total)); 
 
     var sTotal = total + subTotal; 
 
     self.storage.setItem(self.total, sTotal); 
 
     self._addToCart({ 
 
     product: name, 
 
     price: price, 
 
     qty: qty, 
 
     color1: color1 
 
     }); 
 
     var shipping = self._convertString(self.storage.getItem(self.shippingRates)); 
 
     var shippingRates = self._calculateShipping(qty); 
 
     var totalShipping = shipping + shippingRates; 
 

 
     self.storage.setItem(self.shippingRates, totalShipping); 
 
    }); 
 
    }); 
 
},

<div class="product-description" data-name="Rainbow" data-price="12"> 
 
    <h3 class="product-name">Rainbow</h3> 
 
    <p class="product-price">$ 12</p> 
 
    <p class="select-color">Color 1: 
 
    <select id="color1"> 
 
     <option value="blank"></option> 
 
     <option value="white">White</option> 
 
     <option value="red">Red</option> 
 
     <option value="orange">Orange</option> 
 
     <option value="yellow">Yellow</option> 
 
     <option value="green">Green</option> 
 
     <option value="blue">Blue</option> 
 
     <option value="purple">Purple</option> 
 
     <option value="pink">Pink</option> 
 
     <option value="black">Black</option> 
 
    </select> 
 
    </p>

Answer 1

你需要得到提交事件处理程序内的颜色。您正在试图做到这一点用户已经改变了什么

变化

var color1 = $("#color1 option:selected").val(); 

$form.on("submit", function() { 

要

$form.on("submit", function() { 
    // get color when user submits . Need to also do some validation 
    var color1 = $("#color1 option:selected").val();