所以基本上我在這里想要的是創建一個隱藏段落，當選擇每個值時，隱藏段落顯示我為每個值設置的自定義文本。所以基本上如果我選擇奧迪我想輸入：隨機文本/寶馬>無論如何/梅賽德斯>汽車，重點是自定義為每個選定值顯示的文本完全需要這個，所以我們非常感謝任何幫助！ <!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>
2 回答
HUX布斯
TA貢獻1876條經驗 獲得超6個贊
如何使用隨機數據添加數據屬性，例如：
<!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
TA貢獻1871條經驗 獲得超8個贊
我不確定是否理解你的問題，但我認為這是一個可能的解決方案：
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>
- 2 回答
- 0 關注
- 140 瀏覽
添加回答
舉報
0/150
提交
取消