1

您好，这是一个价目表下拉菜单。我想知道的是如何添加一些自定义值和一些下拉值，这些值将乘以结果并添加到总价中。将其命名为 index.js 下面是 javascript：

jQuery.noConflict();

function updatePrice(select) {
  jQuery(select).parent().siblings('.price').html('$' + select.value);

  var sum = 0;
  jQuery('.price').each(function(){
    PlgContentPricetable = jQuery(this).text().toString().replace('$', '');
    sum = Number(parseFloat( PlgContentPricetable )) + sum;
  });
  jQuery('.total').html('$' + Number(sum).toFixed(2) );

}

jQuery(document).ready(function(){

  var html = '';
  html += '<div class="table-responsive"><table class="table table-bordered table-striped" id="pricingTable">';
  html += '<thead><tr><th>Item</th><th>Options</th><th>Price</th></tr></thead>';

  jQuery('#pricingTable > li').each(function(){
    var item = jQuery(this).find('h4').text();

    var select = '<select onchange="updatePrice(this);">';
    select += '<option value="0.00">Select</option>';
    jQuery(this).find('ul > li').each(function(){
      var price = jQuery(this).text().match(/\$\S+/g);
      select += '<option value="' + price.toString().replace('$', '') + '">' + jQuery(this).text() + '</option>';
    });
    select += '</select>';
    html += '<tr><td><strong>' + item + '</strong></td><td>' + select + '</td><td class="price">$0.00</td></tr>';
  });

  if(jQuery('#basePrice').val() != ''){
    jQuery('#basePrice').hide();
    html += '<tr><td colspan="2" align="right">Setup Charge and Test Pressing</td><td class="price">$' + jQuery('#basePrice').val() + '</td></tr>';
  }

  html += '<tfoot><tr><td colspan="2" align="right">Total</td><td class="total">$' + jQuery('#basePrice').val() + '</td></tr></tfoot></table></div>';

  jQuery('#pricingTable').replaceWith(html);

});

现在对于我正在使用的 html。数量应该是您输入可变数量的自定义字段。它必须根据输入的金额乘以价格和下拉选项。另一个问题是重量和颜色选项卡也应该相应地更改总价，但必须保留为下拉菜单。当您选择该选项时，总数会根据您的选择而变化，但也取决于数量......请帮助我一团糟！

    <!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Maiko Rekords</title>



    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

        <link rel="stylesheet" href="css/style2.css">




  </head>

  <body>

    <div class="container">
<ul id="pricingTable">
  <li>
    <h4>Quantity</h4>
    <ul>
      <li>300pcs $183.00</li>
      <li>500pcs $305.00</li>
      <li>1000pcs $610.00</li>
    </ul>
  </li>
<li>
    <h4>Size</h4>
    <ul>
      <li>7" Vinyl $330.00</li>
      <li>10" Vinyl $550.00</li>
      <li>12" Vinyl $1,100.00</li>
    </ul>
  </li>
  <li>
    <h4>Weight</h4>
    <ul>
      <li>120gr $183.00</li>
      <li>150gr $305.00</li>
      <li>180gr $610.00</li>
    </ul>
  </li>
<li>
    <h4>Color</h4>
    <ul>
      <li>Black $0.00</li>
      <li>Transparent $0.00</li>
      <li>Single Color $417.00</li>
      <li>Two Color $417.00</li>
      <li>Three Color $417.00</li>
    </ul>
  </li>

<p><input id="basePrice" type="text" value="170.00" placeholder="Black Vinyl" /></p>

</div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

        <script src="js/index.js"></script>

  </body>
</html>

让我知道我是否可以解释更多我的问题。

4

0 回答 0