列出人口依賴其他功能選擇？

Question

我收到了一個非常基本的小腳本，最多可以選擇3種產品，這會導致價格取決於是選擇夏季還是冬季作爲季節。

我得到它的工作作爲一個小提琴這裏：（即2個不同的干邑生產商） https://jsfiddle.net/Lantador/4chc7nkd/

我的問題是我想提出的哪些產品上市的產品（productchoice），更改列表這取決於我選擇哪個季節 - 但我對如何解決這個問題非常不確定？

腳本：

$(function product() { 
    var productchoice = { 
    "No choice": "0", 
    "Apples": "10.8", 
    "Bananas": "17.2", 
    "Cookies": "6.5", 
    "Icecream": "10.8", 
    "Lollipops": "6.5" 
    }; 

    function populate(options) { 
    var product_container = "" 
    $.each(options, function(key, value) { 
     product_container += '<option value="' + value + '">' + key + '</option>' 
    }); 
    $(".product").each(function() { 
     $(this).html(product_container); 
     // this.innerHTML = container; 
    }); 
    } 

    $(".product").on("change", function() { 
    var total = 0; 
    $('.product').each(function() { 
     total += parseFloat($(this).val()); 
    }); 
    $('.seasontype').each(function() { 
     total *= parseFloat($(this).val()); 
    }); 
    $('#total').text(total.toFixed(2) + ' dollahbats'); 
    }); 

    populate(productchoice); 
}); 




$(function seasontype() { 
    var ktypevalg = { 
    "Winter": "0.5", 
    "Summer": "1.0", 
    }; 

    function populate(options) { 
    var ktype_container = "" 
    $.each(options, function(key, value) { 
     ktype_container += '<option value="' + value + '">' + key + '</option>' 
    }); 
    $(".seasontype").each(function() { 
     $(this).html(ktype_container); 
     // this.innerHTML = container; 
    }); 
    } 

    $(".seasontype").on("change", function() { 
    var total = 0; 
    $('.fag').each(function() { 
     total += parseFloat($(this).val()); 
    }); 
    $('.seasontype').each(function() { 
     total *= parseFloat($(this).val()); 
    }); 
    $('#total').text(total.toFixed(2) + ' dollahbats'); 
    }); 

    populate(ktypevalg); 
}); 

的HTML：

<center> 
<br>3 options with different choices from a list: 
<p>Choice 1: 
    <select class="product" id="product1"></select> 
</p> 
<p>Choice 2: 
    <select class="product" id="product2"></select> 
</p> 
<p>Choice 3: 
    <select class="product" id="product3"></select> 
</p> 
<p>Total price: <span id="total">0.00 dollahbats</span> 

</p> 
<p>Season: 
    <select class="seasontype" id="ktype1"></select> 
</p> 
    </center> 

<br/> 

Answer 1

你需要擴展自己的產品列表：

var productchoice = { 
    "No choice": 
      { 
       price: "0", 
       winter: 1, //show in winter list 
       summer: 1 //show in summer list 
      } 
    , 
    "Apples": { 
     price: "10.8", 
     winter: 0, //do not show in winter list 
     summer: 1 //show in summer list 
    } 
    //... and so on 
}; 

然後在您需要檢查每個迭代，有什麼是季節和創造一個條件，這個產品是可利用的那個季節：

var product_container = ''; 
$.each(options, function (key, value) { 
    if (($('#ktype1').val() == '0.5' && value.winter == 1) || ($('#ktype1').val() == '1.0' && value.summer == 1)) { 
     product_container += '<option value="' + value.price + '">' + key + '</option>' 
    } 
});