<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Switch Statement and Labeled Break</title>
<script>
addEvent(window, ‘load’, initialize);
function initialize()
{
// add an event to the drop down list
addEvent(document.getElementById(’chips’), ‘change’, getPrice);
}
function product(name, price)
{
this.name = name;
this.price = price;
}
var ICs = new Array();
ICs[0] = new product("Septium 900MHz", "$149");
ICs[1] = new product("Septium Pro 1.0GHz", "$249");
ICs[2] = new product("Octium BFD 750MHz", "$329");
var snacks = new Array();
snacks[0] = new product("Rays Potato Chips", "$1.79");
snacks[1] = new product("Cheezey-ettes", "$1.59");
snacks[2] = new product("Tortilla Flats", "$2.29");
// lookup in the ‘table’ the cost associated with the product
function getPrice()
{
var chipName = this.options[this.selectedIndex].text;
var chipType = this.options[this.selectedIndex].value;
var outField = document.getElementById(’cost’);
master:
switch(chipType)
{
case "ICs":
for (var i = 0; i < ICs.length; i++)
{
if (ICs[i].name == chipName)
{
outField.value = ICs[i].price;
break master;
}
}
break;
case "snacks":
for (var i = 0; i < snacks.length; i++)
{
if (snacks[i].name == chipName)
{
outField.value = snacks[i].price;
break master;
}
}
}
break;
default:
outField.value = "Not Found";
}
}
</script>
</head>
<body>
<h1>Switch Statement and Labeled Break</h1>
<p>Select a chip for lookup in the chip price table:</p>
<form id="theForm">
<p>
<label for="chips">Chip:</label>
<select id="chips">
<option></option>
<option value="ICs">Septium 900MHz</option>
<option value="ICs">Septium Pro 1.0GHz</option>
<option value="ICs">Octium BFD 750MHz</option>
<option value="snacks">Rays Potato Chips</option>
<option value="snacks">Cheezey-ettes</option>
<option value="snacks">Tortilla Flats</option>
<option>Poker Chipset</option>
</select>
<label for="cost"> Price:</label>
<input type="text" id="cost" size="10">
</p>
</form>
</body>
</html>//在上面的代码片段中，我试图显示所选芯片的价格，但输入字段中没有显示价格。我已附加输出屏幕截图。我使用自定义对象构建了两个数组，模拟两个数据库表。 我还定义了一个函数 getPrice 来关联与产品相关的价格。 提前致谢 output screenshot
最佳答案
这有效。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Switch Statement and Labeled Break</title>
<script>
window.onload = initialize;
function initialize()
{
document.getElementById('chips').addEventListener('change', getPrice);
}
function product(name, price)
{
this.name = name;
this.price = price;
};
var ICs = new Array();
ICs[0] = new product("Septium 900MHz", "$149");
ICs[1] = new product("Septium Pro 1.0GHz", "$249");
ICs[2] = new product("Octium BFD 750MHz", "$329");
var snacks = new Array();
snacks[0] = new product("Rays Potato Chips", "$1.79");
snacks[1] = new product("Cheezey-ettes", "$1.59");
snacks[2] = new product("Tortilla Flats", "$2.29");
function getPrice()
{
var selectelem = document.getElementById("chips"), outField = document.getElementById('cost'), outvalue="";;
var chipName = selectelem.options[selectelem.selectedIndex].text;
var chipType = selectelem.value;
if(!chipType)
{
outField.value = ""; return;
}
switch(chipType)
{
case "ICs":
var arr = ICs.filter(function(item){
return item.name == chipName;
});
outvalue = arr[0].price;
break;
case "snacks":
var arr = snacks.filter(function(item){
return item.name == chipName;
});
outvalue = arr[0].price;
break;
default: outvalue = "Not Found"; break;
}
outField.value = outvalue;
}
</script>
</head>
<body>
<h1>Switch Statement and Labeled Break</h1>
<p>Select a chip for lookup in the chip price table:</p>
<form id="theForm">
<p>
<label for="chips">Chip:</label>
<select id="chips">
<option></option>
<option value="ICs">Septium 900MHz</option>
<option value="ICs">Septium Pro 1.0GHz</option>
<option value="ICs">Octium BFD 750MHz</option>
<option value="snacks">Rays Potato Chips</option>
<option value="snacks">Cheezey-ettes</option>
<option value="snacks">Tortilla Flats</option>
<option value="signals">TCP</option>
<option value="computer">Poker Chipset</option>
</select>
<label for="cost"> Price:</label>
<input type="text" id="cost" size="10">
</p> </form>
</body>
</html>关于javascript - 我想使用 switch 语句显示所选商品的价格值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48437292/