Javascript InnerHtml 来自<select>

Question

在这里需要一些帮助，

基本上我在这一点上是一个用户在这里与我共享的脚本，它的作用是它创建了一个隐藏的段落，并且该段落上显示的内容由 2 个下拉列表的值决定，它工作得非常好，不过只有一件事：

对于第一个<选择>，我想使用数字作为值：0 代表奥迪，1 代表宝马，2 代表梅赛德斯等等，但是一旦我用数字替换这些值，它似乎不起作用，

请检查代码，任何帮助都非常感谢，真的:)

 function myFunction() { let messages = { AudiBlack: 'Black Audi', AudiRed: 'Red Audi', BMWBlack: 'Black BMW', BMWRed: 'Red BMW', MercedesBlack: 'Black Mercedes', MercedesRed: 'Red Mercedes', VolvoBalck: 'Black Volvo', VolvoRed: 'Red Volvo' }; var car = document.getElementById("mySelect").value; var color = document.getElementById("Variants").value; document.getElementById("demo").innerHTML = `${messages[car+color]}`; }

 <body> <p>Select a new car from the list.</p> <select id="mySelect" onchange="myFunction()"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> <select id="Variants" onchange="myFunction()"> <option value="Black"> Black <option value="Red">Red </select> <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p> <p id="demo"></p> </body>

Answer 1

您必须在 myFunction() 中重新声明您的密钥，以便它工作：

 function myFunction() { let messages = { '0Black': 'Black Audi', '0Red': 'Red Audi', '1Black': 'Black BMW', '1Red': 'Red BMW', '2Black': 'Black Mercedes', '2Red': 'Red Mercedes', '3Black': 'Black Volvo', '3Red': 'Red Volvo' }; var car = document.getElementById("mySelect").value; var color = document.getElementById("Variants").value; document.getElementById("demo").innerHTML = `${messages[car+color]}`; }

 <body> <p>Select a new car from the list.</p> <select id="mySelect" onchange="myFunction()"> <option value="0">Audi <option value="1">BMW <option value="2">Mercedes <option value="3">Volvo </select> <select id="Variants" onchange="myFunction()"> <option value="Black"> Black <option value="Red">Red </select> <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p> <p id="demo"></p> </body>

并且小心你的代码中有一个VolvoBalck而不是VolvoBlack 。

Answer 2

将select中的值作为数字的最简单方法是使用数组，这与您正在执行的操作非常相似，但是，我会更改数组的性质以包含对象。 像这样

 function myFunction() { let messages = [{ red: 'Red Audi', black: 'Black Audi' }, { red: 'Red BMW', black: 'Black BMW' } ]; var carIdx = document.getElementById("mySelect").value; var color = document.getElementById("Variants").value; document.getElementById("demo").innerHTML = `${messages[carIdx][color]}`; }

 <body> <p>Select a new car from the list.</p> <select id="mySelect" onchange="myFunction()"> <option value="0">Audi <option value="1">BMW </select> <select id="Variants" onchange="myFunction()"> <option value="black"> Black <option value="red">Red </select> <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p> <p id="demo"></p> </body>

我将其更改为这种方式的原因是，如果您为不同的汽车使用不同的颜色，并且也更易于阅读和理解。

Javascript InnerHtml 来自<select>

问题描述

2 个解决方案

解决方案1
3 2020-03-31 17:57:07

解决方案2
0 2020-03-31 18:00:36

Javascript InnerHtml 来自<select>

问题描述

2 个解决方案

解决方案1 3 2020-03-31 17:57:07

解决方案2 0 2020-03-31 18:00:36

解决方案1
3 2020-03-31 17:57:07

解决方案2
0 2020-03-31 18:00:36