我想要做的事情的工作小提琴： https://jsfiddle.net/wymn7g6s/
类别和产品下拉列表正在使用switch语句。
我想做的是：
添加一个名为Wattage的新案例。 用户选择产品，并且每次都显示该产品的相应瓦数。
下面是我对伪代码的尝试
function configureDropDownLists(category, products) {
//var appliances = {
//refrigerators: [ 'Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS'],
//dishWasher: ['Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana']
// }
var refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS');
var dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');
switch (category.value) {
case 'refrigerators':
products.options.length = 0;
for (i = 0; i < refrigerators.length; i++) {
createOption(products, refrigerators[i], refrigerators[i]);
}
break;
case 'dishWasher':
products.options.length = 0;
for (i = 0; i < dishWasher.length; i++) {
createOption(products, dishWasher[i], dishWasher[i]);
}
break;
default:
products.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
/*
Added on MAY 6th 1:29 PM
Store and display Wattage based on the product selected
1) Define wattage array
2) get wattage array
3) Check for which product is selected and accordingly display the Wattage. This has to happen onChange of the products dropdown.
// define wattage array
var wattageArray = localStorage {
Artic King AEB: 270,
Artic King ATMA: 311,
Avanti Compact:340,
Bosch SS: 214,
Bosch - SHXUC: 200,
Asko DS: 187,
Blomberg: 236,
Amana: 150
};
function getWattageArray() {
var wattageArray = getWattageArray();
// loop and check for key, value
for (var i = 0; i < wattageArray.length; i++) {
var key = wattageArray[i];
var value = wattageArray[i];
var wattageArray = localStorage.getItem("wattageArray");
// check for products drop down and compare it to wattage
for (options.selectedIndex == wattageArray) {
// display using innerHTML. Parse it since it is an integer
var value = parseInt(localStorage.getItem[i]));
document.getElementById("wattage").innerHTML = value;
}
}
SIMPLE SET and DISPLAY TO SEE IF LOCAL STORAGE WORKS
//localStorage.setItem("Artic King AEB",270);
//localStorage.setItem("Artic King ATMA",311);
//localStorage.setItem("Avanti Compact",340);
//localStorage.setItem("Bosch SS",214);
//localStorage.setItem("Bosch - SHXUC",200);
//localStorage.setItem("Asko DS",187);
//localStorage.setItem("Blomberg",236);
//localStorage.setItem("Amana",150);
//var sticky = parseInt(localStorage.getItem("Blomberg"));
//alert(sticky);
function estimatedDailyUse(dailyUse){
var button = document.getElementsByTagName("button");
console.log(button);
if(button.onclick.id =="h1"){
return dailyUse = 1;
alert("You clicked one");
console.log("hi");
}
else if (button.onclick.id =="h3"){
return dailyUse = 3;
}
else if (button.onclick.id =="h6"){
return dailyUse = 6;
}
else if (button.onclick.id =="h24"){
return dailyUse = 24;
}
}
/*
function selectOption(ddl,text,value){
document.getElementById("product").onchange = function() {
this.selectedIndex ==selected;
}
}
if(category.value == selected){
}
if so and so option is selected in Category
make that option as selected
populate products
if so and so option is selected by user in products
make that option as selected
display wattage
}
$(function() {
var categoryValue = localStorage.getItem("categoryValue");
if(categoryValue != null) {
$("select[name=ddl]").val(categoryValue);
}
$("select[name=ddl]").on("change", function() {
localStorage.setItem("categoryValue", $(this).val());
});
})
*/
/*
How to store and display Wattage based on the product selected
1) Define wattage array
2) get wattage array
3) Check for which product is selected and accordingly display the Wattage. This has to happen onChange of the products dropdown.
// define wattage array
var wattageArray = localStorage {
Artic King AEB: 270,
Artic King ATMA: 311,
Avanti Compact:340,
Bosch SS: 214,
Bosch - SHXUC: 200,
Asko DS: 187,
Blomberg: 236,
Amana: 150
};
// call wattage array inside init
window.onload = init;
function init() {
//options.onchange = displayWattage;
var wattageArray = getWattageArray();
for (var i = 0; i < wattageArray.length; i++) {
var key = wattageArray[i];
var value = wattageArray[i];
}
}
function getWattageArray() {
var wattageArray = localStorage.getItem("wattageArray");
for (options.selectedIndex == wattageArray) {
var value = parseInt(localStorage.getItem[i]));
document.getElementById("wattage").innerHTML = value;
}
}
SIMPLE SET and DISPLAY TO SEE IF LOCAL STORAGE WORKS
//localStorage.setItem("Artic King AEB",270);
//localStorage.setItem("Artic King ATMA",311);
//localStorage.setItem("Avanti Compact",340);
//localStorage.setItem("Bosch SS",214);
//localStorage.setItem("Bosch - SHXUC",200);
//localStorage.setItem("Asko DS",187);
//localStorage.setItem("Blomberg",236);
//localStorage.setItem("Amana",150);
//var sticky = parseInt(localStorage.getItem("Blomberg"));
//alert(sticky);
*/
另外，如何选择下拉菜单（一旦用户完成产品选择。）
由于
答案 0 :(得分：1)
This should be pretty close to what you're looking for。正如我在上面的评论中所说，你必须重新思考如何构建这些功能。只有在类别更改时，才会调用您创建的configureDropDownLists函数。如果您希望在选择新产品时更改瓦数，则需要将其放在单独的功能中，该功能在产品值更新时执行。
这是更新的JS：
var category = document.getElementById('ddl'),
product = document.getElementById('products'),
wattage = document.getElementById('wattage'),
refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS'),
dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');
var productChange = function() {
switch (product.value) {
case 'Artic King AEB':
wattage.innerHTML = 400;
break;
case 'Artic King ATMA':
wattage.innerHTML = 500;
break;
default:
wattage.innerHTML = 'N/A'
break;
}
}
var categoryChange = function() {
switch (category.value) {
case 'refrigerators':
products.options.length = 0;
for (i = 0; i < refrigerators.length; i++) {
createOption(products, refrigerators[i], refrigerators[i]);
}
break;
case 'dishWasher':
products.options.length = 0;
for (i = 0; i < dishWasher.length; i++) {
createOption(products, dishWasher[i], dishWasher[i]);
}
break;
default:
products.options.length = 0;
break;
}
productChange();
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
category.addEventListener('change', categoryChange);
product.addEventListener('change', productChange);
你会注意到一些事情：
productChange和categoryChange。这样，它们可以在其他地方随时调用（比如我设置的事件监听器）。除了我个人对清洁代码（IMO）的偏好之外，这允许您在productChange函数内调用categoryChange函数 - 更新类别初始选择的瓦数值。只要用户自己更新产品选择，就会稍后调用它。