如何從選擇下拉菜單中拆分文本以用於使用Jquery/Javascript進行乘法運算

我有一個select下拉菜單來選擇產品大小，該大小還會告訴您每個大小的價格。如何從選擇下拉菜單中拆分文本以用於使用Jquery/Javascript進行乘法運算

我想顯示總成本以及它將覆蓋多少公頃。 1kg = 1公頃

該值是尺寸的ID，在添加到購物車時使用。

<select class="productChoice"> 
    <option value="">-- Please select --</option> 
    <option value="2317474">1KG $180</option> 
    <option value="2317475">5KG $100</option> 
    <option value="2317476">10KG $200</option> 
    <option value="2317477">50KG $900</option> 
</select> 

<input type="text" id="Units_5183442" class="productTextInput" value="0"> 

<label id="hectares_5183442"></label> Hectares 
<label id="total_5183442"></label>

所以你選擇你的產品尺寸，然後你想購買多少這種尺寸。從那裏我想在各自的標籤中顯示兩個不同的值。

我正在努力分離選項文本來做我所需要的。無法越過NaN。

到目前爲止，我已經得到了什麼是：

$('#Units_5183442').keyup(multiply); 
$('select.productChoice').change(multiply); 
function multiply() { 
    var quantity = parseFloat($('#Units_5183442').val()); 
    var dollars = cantfigureouthowtodothis 
    var size = cantfigureouthowtodothis 

    $('#total_5183442').text('$'+(quantity * dollars)); 
    $('#hectares_5183442').text((quantity * size)); 
}

來源

2013-04-02 Justin

哪裏的JS代碼你使用？ – Dogbert

是的，這將有所幫助，我的壞 – Justin

如果需要，我可以用我自己的替換來替換自動生成的標記 - 但是，當後端的價格或大小發生更改時，確實需要更多編輯，因此這不是最好。 – Justin

這將更新公頃，總費用標籤：

$(function() { 
    $('.productChoice').change(function() { 

     if($('#Units_5183442').val() == 0) // min 1 
      $('#Units_5183442').val(1); 

     var selectedText = $(this).find('option:selected').text(); 
     var match = selectedText.match(/\d{1,3}KG/g); 
     if(match.length == 1) 
     { 
      var kg = parseInt(match[0].replace('KG','')); 
      var costMatch = selectedText.match(/\$\d{1,3}/g); 
      if(costMatch.length == 1) 
      { 
       var cost = parseInt(costMatch[0].replace('$','')); 
       var quantity = parseInt($('#Units_5183442').val()); // presume you can only order integer quantities? 

       $('#hectares_5183442').text(kg * quantity); 
       $('#total_5183442').text('Total cost: $' + cost * quantity) 
      } 
     } 
    }); 

    $('#Units_5183442').keyup(function() { 
     $('.productChoice').trigger('change'); 
    }); 
});

JS小提琴這裏：http://jsfiddle.net/zud2Z/2/

來源

2013-04-02 08:31:57 Nathan

這對我來說非常合適，謝謝 – Justin

這裏有一種方法使用split()

jsFiddle

var str = '1KG $180'; 
var kgs = str.split('KG')[0]; 
var dollars = str.split('$')[1]; 
alert('kgs: ' + kgs + 
     '\ndollars: ' + dollars);

來源

2013-04-02 08:23:12

像這樣的東西提取值：

var calcResult = function() { 

    var oSel = jQuery('.productChoice option:selected'), 
     sText = oSel.text(), 
     aData = sText.split(' '), 
     mass = 0, 
     price = 0, 
     num = parseInt(jQuery('#Units_5183442').value()); 

    if((aData.length > 1) && (aData[0] != '--')) { 
     mass = parseInt(aData[0]); 
     price = parseInt(aData[1]); 
    } 

    jQuery('#total_5183442').text(num * price); 
    jQuery('#hectares_5183442').text(num * mass); 

}; 

jQuery('.productChoice').on('change', calcResult); 
jQuery('#Units_5183442').on('change', calcResult);

來源

2013-04-02 08:29:58 Victor

或本

var txt = '1KG $100';//assuming you've finally got and have validated this string 
vals = txt.split('KG $'); 

var dollars = vals[1]; 
var size = vals[0]

來源

2013-04-02 08:32:27 Ejaz

您也可以爲您的產品創建一個對象，然後用它爲你的計算。

var products = { 
     '2317474':{ 
      qt:1, 
      price:180 
     } 
    };

然後通過產品ID訪問它像

var prod = products[id];

來源

2013-04-02 08:40:33

如何從選擇下拉菜單中拆分文本以用於使用Jquery/Javascript進行乘法運算

回答

相關問題