更新并计算下拉变化的营养价值

Question

我发现了一些与我需要做的事情非常相似的事情：

http://jsfiddle.net/k3edG/3/

但是我需要根据下拉框更新值。我已经添加了下拉菜单但不确定如何在更改正确的下拉列表时获取正确的值。有人能指出我正确的方向吗？

我的JsFiddle：https://jsfiddle.net/1gvsezxx/

$(document).ready(function() {
    $('.options').on('change', 'input', function() {
        var $self = $(this);
        var inputType = $self.attr('type');

        if (inputType == 'radio') {
            $self.parent('li').addClass('active').siblings().removeClass('active');
        } else if (inputType == 'checkbox') {
            $self.parent('li').toggleClass('active');
        }
        runUpdate();
    });

});

function runUpdate() {
    // get the sum of the elements
    var calories = $(".caloriesSum", '.active').sum();
    var fat = $(".fatSum", '.active').sum();
    var satfat = $(".satfatSum", '.active').sum();
    var carbs = $(".carbsSum", '.active').sum();
    var protein = $(".proteinSum", '.active').sum();
    var sodium = $(".sodiumSum", '.active').sum();
    var chloresterol = $(".chloesterolSum", '.active').sum();

    // update the total
    $("#totalCalories").text(+calories.toString());
    $("#totalFat").text(+fat.toString());
    $("#totalSatFat").text(+satfat.toString());
    $("#totalCarbs").text(+carbs.toString());
    $("#totalProtein").text(+protein.toString());
    $("#totalSodium").text(+sodium.toString());
    $("#totalChloresterol").text(+chloresterol.toString());
}

Answer 1

你需要添加这样的东西

$(function() {
    $("#input-option227").change(function() {
        //To get the selected option use this code here -> $('option:selected', this).text();
    });
});

Answer 2

我对您的代码进行了一些更改，因此请仔细研究我的修改：

<强> HTML

<form action="" method="post" id="nutform" onsubmit="return false;">
  <h4>Select Your Protein</h4>

  <div class="options">
    <select name="option[227]" id="input-option227" class="form-control">
      <option value="0"> --- Please Select --- </option>
      <option value="17">Herb Turkey</option>
      <option value="18">Moroccan Mince</option>
      <option value="19">Cajun Chicken</option>
    </select>

    <div id="HerbTurkey" data-option-id="17" class="nutritionInfo">
      <span class="caloriesSum">280</span>
      <span class="fatSum">6</span>
      <span class="satfatSum">0</span>
      <span class="carbsSum">44</span>
      <span class="proteinSum">8</span>
      <span class="sodiumSum">340</span>
      <span class="chloesterolSum">0</span>
    </div>

    <div id="MoroccanMince" data-option-id="18" class="nutritionInfo">
      <span class="caloriesSum">290</span>
      <span class="fatSum">6</span>
      <span class="satfatSum">2</span>
      <span class="carbsSum">49</span>
      <span class="proteinSum">9</span>
      <span class="sodiumSum">770</span>
      <span class="chloesterolSum">0</span>
    </div>

    <div id="CajunChicken" data-option-id="19" class="nutritionInfo">
      <span class="caloriesSum">265</span>
      <span class="fatSum">5</span>
      <span class="satfatSum">1</span>
      <span class="carbsSum">33</span>
      <span class="proteinSum">63</span>
      <span class="sodiumSum">12</span>
      <span class="chloesterolSum">6</span>
    </div>
  </div>

  <h4>Select Your Carbs</h4>

  <div class="options">
    <select name="option[228]" id="input-option228" class="form-control">
      <option value="0"> --- Please Select --- </option>
      <option value="20">Brown Rice</option>
      <option value="21">White Rice</option>
      <option value="22">Couscous</option>
    </select>

    <div id="BrownRice" data-option-id="20" class="nutritionInfo">
      <span class="caloriesSum">230</span>
      <span class="fatSum">9</span>
      <span class="satfatSum">3</span>
      <span class="carbsSum">3</span>
      <span class="proteinSum">32</span>
      <span class="sodiumSum">170</span>
      <span class="chloesterolSum">90</span>
    </div>

    <div id="WhiteRice" data-option-id="21" class="nutritionInfo">
      <span class="caloriesSum">210</span>
      <span class="fatSum">9</span>
      <span class="satfatSum">3</span>
      <span class="carbsSum">2</span>
      <span class="proteinSum">29</span>
      <span class="sodiumSum">490</span>
      <span class="chloesterolSum">90</span>
    </div> 

    <div id="Couscous" data-option-id="22" class="nutritionInfo">
      <span class="caloriesSum">210</span>
      <span class="fatSum">9</span>
      <span class="satfatSum">3</span>
      <span class="carbsSum">2</span>
      <span class="proteinSum">29</span>
      <span class="sodiumSum">490</span>
      <span class="chloesterolSum">90</span>
    </div>
  </div>
  <div id="totals">

    <h4>Totals</h4>

    <ul>
      <li>Calories: <span id="totalCalories"> </span></li>
      <li>Fat: <span id="totalFat"> </span>g</li>
      <li>Sat. Fat: <span id="totalSatFat"> </span>g</li>
      <li>Carbs: <span id="totalCarbs"> </span>g</li>
      <li>Protein: <span id="totalProtein"> </span>g</li>
      <li>Sodium: <span id="totalSodium"> </span>mg</li>
      <li>Cholesterol: <span id="totalChloresterol"> </span>mg</li>
    </ul>
  </div>
</form>

<强> JS

$(document).ready(function() {
    $('.options').on('change', 'select', function() {
        var $self = $(this);
        var inputId = $self.val();

        $self.parent('div').find('.active').removeClass('active');
        $self.parent('div')
            .find('[data-option-id='+inputId+']')
            .addClass('active');

        runUpdate();
    });
});

function runUpdate() {
    // get the sum of the elements
    var calories = $(".caloriesSum", '.active').sum();
    var fat = $(".fatSum", '.active').sum();
    var satfat = $(".satfatSum", '.active').sum();
    var carbs = $(".carbsSum", '.active').sum();
    var protein = $(".proteinSum", '.active').sum();
    var sodium = $(".sodiumSum", '.active').sum();
    var chloresterol = $(".chloesterolSum", '.active').sum();

    // update the total
    $("#totalCalories").text(+calories.toString());
    $("#totalFat").text(+fat.toString());
    $("#totalSatFat").text(+satfat.toString());
    $("#totalCarbs").text(+carbs.toString());
    $("#totalProtein").text(+protein.toString());
    $("#totalSodium").text(+sodium.toString());
    $("#totalChloresterol").text(+chloresterol.toString());
}

您可以在此处查看结果：http://jsfiddle.net/z5u0ajc6/

<强> 更新

经过一些评论后，我做了一些修改以保留HTML代码，所以新的解决方案如下：

原始HTML

<form action="" method="post" id="nutform" onsubmit="return false;">
  <h4>Select Your Protein</h4>    
  <select name="option[227]" id="input-option227" class="form-control">
    <option value=""> --- Please Select --- </option>
    <option value="17">Herb Turkey</option>
    <option value="18">Moroccan Mince</option>
    <option value="19">Cajun Chicken</option>
  </select>    
  <div>
    <div id="17" class="nutritionInfo">
      <span class="caloriesSum">280</span>
      <span class="fatSum">6</span>
      <span class="satfatSum">0</span>
      <span class="carbsSum">44</span>
      <span class="proteinSum">8</span>
      <span class="sodiumSum">340</span>
      <span class="chloesterolSum">0</span>
    </div>    
    <div id="18" class="nutritionInfo">
      <span class="caloriesSum">290</span>
      <span class="fatSum">6</span>
      <span class="satfatSum">2</span>
      <span class="carbsSum">49</span>
      <span class="proteinSum">9</span>
      <span class="sodiumSum">770</span>
      <span class="chloesterolSum">0</span>
    </div>    
    <div id="19" class="nutritionInfo">
      <span class="caloriesSum">265</span>
      <span class="fatSum">5</span>
      <span class="satfatSum">1</span>
      <span class="carbsSum">33</span>
      <span class="proteinSum">63</span>
      <span class="sodiumSum">12</span>
      <span class="chloesterolSum">6</span>
    </div>
  </div>
  <h4>Select Your Carbs</h4>    
  <select name="option[228]" id="input-option228" class="form-control">
    <option value=""> --- Please Select --- </option>
    <option value="20">Brown Rice</option>
    <option value="21">White Rice</option>
    <option value="22">Couscous</option>
  </select>
  <div id="20" class="nutritionInfo">
    <span class="caloriesSum">230</span>
    <span class="fatSum">9</span>
    <span class="satfatSum">3</span>
    <span class="carbsSum">3</span>
    <span class="proteinSum">32</span>
    <span class="sodiumSum">170</span>
    <span class="chloesterolSum">90</span>
  </div>    
  <div id="21" class="nutritionInfo">
    <span class="caloriesSum">210</span>
    <span class="fatSum">9</span>
    <span class="satfatSum">3</span>
    <span class="carbsSum">2</span>
    <span class="proteinSum">29</span>
    <span class="sodiumSum">490</span>
    <span class="chloesterolSum">90</span>
  </div>    
  <div id="22" class="nutritionInfo">
    <span class="caloriesSum">210</span>
    <span class="fatSum">9</span>
    <span class="satfatSum">3</span>
    <span class="carbsSum">2</span>
    <span class="proteinSum">29</span>
    <span class="sodiumSum">490</span>
    <span class="chloesterolSum">90</span>
  </div>
  <div id="totals">
    <h4>Totals</h4>
    <ul>
      <li>Calories: <span id="totalCalories"> </span></li>
      <li>Fat: <span id="totalFat"> </span>g</li>
      <li>Sat. Fat: <span id="totalSatFat"> </span>g</li>
      <li>Carbs: <span id="totalCarbs"> </span>g</li>
      <li>Protein: <span id="totalProtein"> </span>g</li>
      <li>Sodium: <span id="totalSodium"> </span>mg</li>
      <li>Cholesterol: <span id="totalChloresterol"> </span>mg</li>
    </ul>
  </div>
</form>

新JS

$(document).ready(function() {
  $("#nutform").on("change", "select", function() {
    var changed = $(this).val();
    $(".active").removeClass('active');
    $('#' + changed).addClass('active');
    runUpdate();
  });
});

function runUpdate() {
  var calories = $(".caloriesSum", '.active').sum();
  var fat = $(".fatSum", '.active').sum();
  var satfat = $(".satfatSum", '.active').sum();
  var carbs = $(".carbsSum", '.active').sum();
  var protein = $(".proteinSum", '.active').sum();
  var sodium = $(".sodiumSum", '.active').sum();
  var chloresterol = $(".chloesterolSum", '.active').sum();

  $("#totalCalories").text(+calories.toString());
  $("#totalFat").text(+fat.toString());
  $("#totalSatFat").text(+satfat.toString());
  $("#totalCarbs").text(+carbs.toString());
  $("#totalProtein").text(+protein.toString());
  $("#totalSodium").text(+sodium.toString());
  $("#totalChloresterol").text(+chloresterol.toString());
};

  

请注意，您需要库jquery.calculation！

可以在此处检查新结果：http://jsfiddle.net/tps07nek/2/

更新2

我认为这是一个更好的解决方案：

新JS：

$(document).ready(function() {
  $("#nutform").on("change", "select", function() {
    $(".active").removeClass('active');
    $.each($("#nutform select"), function(index, select) {
      var changed = $(select).val();      
      $('#' + changed).addClass('active');
    });

    runUpdate();
  });
});

function runUpdate() {
  var calories = $(".caloriesSum", '.active').sum();
  var fat = $(".fatSum", '.active').sum();
  var satfat = $(".satfatSum", '.active').sum();
  var carbs = $(".carbsSum", '.active').sum();
  var protein = $(".proteinSum", '.active').sum();
  var sodium = $(".sodiumSum", '.active').sum();
  var chloresterol = $(".chloesterolSum", '.active').sum();

  $("#totalCalories").text(+calories.toString());
  $("#totalFat").text(+fat.toString());
  $("#totalSatFat").text(+satfat.toString());
  $("#totalCarbs").text(+carbs.toString());
  $("#totalProtein").text(+protein.toString());
  $("#totalSodium").text(+sodium.toString());
  $("#totalChloresterol").text(+chloresterol.toString());
};