Javascript InnerHtml 来自<select>
[英]Javascript InnerHtml from <select>
问题描述
need some help here please ,
在这里需要一些帮助，
Basically what I've at this point is a script a user here shared with me , what it does is that it has created a hidden paragraph and the content displayed on this paragraph is conditioned by the values of 2 dropdowns , it works absolutely fine , there is only one thing though :基本上我在这一点上是一个用户在这里与我共享的脚本，它的作用是它创建了一个隐藏的段落，并且该段落上显示的内容由 2 个下拉列表的值决定，它工作得非常好，不过只有一件事：
for the first < select > I want to use numbers as values : 0 for Audi , 1 for BMW , 2 for Mercedes and so on , but once I replace those values with numbers it doesnt seem to work ,对于第一个<选择>，我想使用数字作为值：0 代表奥迪，1 代表宝马，2 代表梅赛德斯等等，但是一旦我用数字替换这些值，它似乎不起作用，
Please check the code , any help is more than appreciated , really :)请检查代码，任何帮助都非常感谢，真的:)
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>
2 个解决方案
解决方案1
3 2020-03-31 17:57:07
You have to redeclare your keys in myFunction() so that it works:您必须在 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>
And be careful you have a VolvoBalck instead of VolvoBlack in your code.并且小心你的代码中有一个VolvoBalck而不是VolvoBlack 。
解决方案2
0 2020-03-31 18:00:36
the easiest way of having the values in your select as numbers is using an array, very similar to what you are doing, however, I would change the nature of the array to contain objects.将select中的值作为数字的最简单方法是使用数组，这与您正在执行的操作非常相似，但是，我会更改数组的性质以包含对象。 Like this像这样
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>
The reason I'd change it to be that way is in case you have different colors for different cars and is also easier to read and understand.我将其更改为这种方式的原因是，如果您为不同的汽车使用不同的颜色，并且也更易于阅读和理解。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.