所选值 Javascript 的不同 InnerHTML 输出
所以基本上我在这里想要的是创建一个隐藏段落，当选择每个值时，隐藏段落显示我为每个值设置的自定义文本。所以基本上如果我选择奥迪我想输入：随机文本/宝马>无论如何/梅赛德斯>汽车，
重点是自定义为每个选定值显示的文本
完全需要这个，所以我们非常感谢任何帮助！
<!DOCTYPE html>
<html>
<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>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
小唯快跑啊浏览 112回答 2
2回答
-
HUX布斯
如何使用随机数据添加数据属性，例如： <!DOCTYPE html><html><body><p>Select a new car from the list.</p><select id="mySelect" onchange="selectionChanged(this)"> <option value="Audi" data="random audi data">Audi <option value="BMW" data="random bmw data">BMW <option value="Mercedes" data="random mercedes data">Mercedes <option value="Volvo" data="random volvo data">Volvo</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><script>function selectionChanged(selectObj) { var carData = selectObj.options[selectObj.selectedIndex].getAttribute('data'); var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = "You selected: " + x+ " with car data "+carData;}</script></body></html>通过这种方式，您可以将数据与选项保存在一起，这样您就不需要在其他地方跟踪它。 -
ITMISS
我不确定是否理解你的问题，但我认为这是一个可能的解决方案：function myFunction() { let messages = { Audi: 'Haldo for: ', BMW: 'Maldo for: ', Mercedes: 'Baldo for', Volvo: 'Marioldo for' } var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = `${messages[x]} ${x}`;}myFunction(); // Now run the funtion for a init我创建一个包含 n 个键的 JSON，其值为 select 的单个选项，并使用 select 的值（如选择器）来获取分配给 JSON 中键的字符串。更新评论中的问题 <!DOCTYPE html> <html> <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> <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p> <p id="demo"></p> <ul id="list"> </ul> <script> function myFunction() { let messages = { Audi: { brandName: 'Haldo for: ', features: ['Magic', 'free', 'furry'] }, BMW: { brandName: 'Maldo for: ', features: ['lovely'] }, Mercedes: { brandName: 'Baldo for', features: ['twirling', 'tasty'] }, Volvo: { brandName: 'Marioldo for', features: ['bar', 'foo', 'zio'] } } var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = `${messages[x].brandName} ${x}`; let ul = document.getElementById("list") ul.innerHTML = ''; for (let feat of messages[x].features) { console.log(feat) var li = document.createElement('li'); li.innerHTML = feat; ul.appendChild(li); } } myFunction(); </script> </body> </html>
随时随地看视频慕课网APP
相关分类
Html5