更新和計算上下拉變化

營養價值，我發現真的很相似，我需要做的是：更新和計算上下拉變化

但是我需要更新取決於下拉框的值。我添加了下拉菜單，但不確定如何在正確的下拉列表更改時獲得正確的值。任何人都可以將我指向正確的方向嗎？

我的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()); 
}

來源

2016-11-16 BN83

請在[MCVE]在這個問題本身，而不是在第三的所有相關代碼第四方網站。 –

您需要添加這樣的事情

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

來源

2016-11-16 18:41:49 driconmax

我做你的代碼的一些變化，所以請仔細研究我的修改：

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>

$(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/

UPDATE

一些意見之後，我做了一些修改，以十個分量的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()); 
};

Note that you need the library 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()); 
};

來源

2016-11-16 19:03:36

我一定會檢查一下，謝謝。到目前爲止，我自己在這裏：https://jsfiddle.net/1gvsezxx/1/ – BN83

不幸的是，我不能有選擇在同一個div下拉。 – BN83

我到目前爲止已經得到了這個https://jsfiddle.net/1gvsezxx/5/，它的工作起來，它正在使正確的股利「積極」，但它給錯誤'未捕獲TypeError：$（...） .sum不是一個函數'爲什麼沒有通過任何想法？ – BN83

更新和計算上下拉變化

回答

相關問題