当从列表中选择某个内容时，我想显示特定的文本，如果选择了其他内容，则隐藏它。我在w3Schools上找到了一个按钮示例，当您单击该文本时，它会出现，当您再次单击它时，文本会消失。我该如何在列表中激活类似的内容？我更希望所有的东西都是JavaScript，因为我正在努力学习它
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click Me!</button>
<select onchange="myFunction(this)">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<div id="myDIV">
This is my DIV element.
</div>
<div id="Apple">
Apples are awesome.
</div>
<div id="Orange">
Oranges are sower.
</div>
<div id="Pineapple">
Pineapple are sower.
</div>
<div id="Banana">
Bananas are sticky.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>- 获取
results和myBtn标记 - 创建一个
select标记并将其附加到具有boxid的div - 为
options创建一个array of objects(第一个为空，表示"未选择任何选项"文本( - 将选项追加到列表中
- 单击
myBtn，selectedOptionvariable将保持选中的option value，然后它将获得键text的值，并将其添加到div.results
const results = document.getElementById('results');
const myBtn = document.getElementById('myBtn');
(function(){
const selectList = document.createElement('select');
selectList.setAttribute('id', 'selectList');
function create_select_list(){
const output = [];
theOptionsArray.forEach((option) => {
let optionTag =
`<option value="${option.value}">${option.name}</option>`;
output.push(optionTag);
selectList.innerHTML = output.join('');
});
box.appendChild(selectList);
}
const box = document.getElementById('box');
const theOptionsArray = [
{value: '', name: '', text: 'No option is selected'},
{value: 'apple', name: 'Apple', text: 'Apples are awesome.'},
{value: 'orange', name: 'Orange', text: 'Oranges are sower.'},
{value: 'pineapple', name: 'Pineapple', text: 'Pineapple are sower.'},
{value: 'banana', name: 'Banana', text: 'Bananas are sticky.'}
];
// Run the function
create_select_list();
let selectedOption;
myBtn.addEventListener('click', () => {
selectedOption = selectList.value;
for (let i = 0; i < theOptionsArray.length; i++) {
if (selectedOption == theOptionsArray[i].value) {
results.innerHTML = theOptionsArray[i].text
}
}
});
})();<div id="box">
<button id="myBtn">Click</button>
</div>
<div id="results">Select an option</div>我相信这会解决您的查询，在这个过程中，我只需遍历您的所有选项标记，并在选项标记中隐藏所有带有id的div，然后取消隐藏带有所选id的div。只要浏览一下代码，你就会发现它是如何工作的。
<div id="Apple">
Apples are awesome.
</div>
<div id="Orange">
Oranges are sower.
</div>
<div id="Pineapple">
Pineapple are sower.
</div>
<div id="Banana">
Bananas are sticky.
</div>
<script>
function myFunction(z) {
var x = document.getElementById("opt");
//alert(x.value);
for (var i = 0; i < z.options.length; i++) {
str = z.options[i].value;
d = document.getElementById(str);
d.style.display = "none";
}
select = document.getElementById(x.value);
select.style.display = "block";
}
</script>
根据我的理解。您想在单击另一个HTML元素时隐藏某些内容吗？这可以很容易地完成，而且您非常接近解决方案。
<!DOCTYPE html>
<html>
<body>
<div id="myDIV">
<button onclick="myFunction('Apple')">Hide Apple</button>
This is my DIV element.
</div>
<div id="Apple">
<button onclick="myFunction('Orange')">Hide Orange</button>
Apples are awesome.
</div>
<div id="Orange">
<button onclick="myFunction('myDIV')">Hide DIV</button>
Oranges are sower.
</div>
<script>
function myFunction(elementId) {
var x = document.getElementById(elementId);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>function myFunction(opt) {
if(opt==undefined)
opt=document.getElementById("fruits")
if(opt.value=="")
{
document.getElementById("myDIV").style.display = "block";
for(var i=1; i<opt.options.length;i++)
document.getElementById(opt.options[i].value).style.display = "none";
return;
}
document.getElementById("myDIV").style.display = "none";
for(var i=1; i<opt.options.length;i++)
{
document.getElementById(opt.options[i].value).style.display = "none";
if(opt.value==opt.options[i].value)
document.getElementById(opt.value).style.display = "block";
}
}
myFunction();<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click Me!</button>
<select id='fruits' onchange="myFunction(this)">
<option></option>
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<div id="myDIV">
This is my DIV element.
</div>
<div id="Apple">
Apples are awesome.
</div>
<div id="Orange">
Oranges are sower.
</div>
<div id="Pineapple">
Pineapple are sower.
</div>
<div id="Banana">
Bananas are sticky.
</div>
</body>
</html>创建值映射，并根据值更改来更改innerHTML。
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click Me!</button>
<select onchange="myFunction(this.value)">
<option Value="Select">Select</option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Pineapple">Pineapple</option>
<option value="Banana">Banana</option>
</select>
<div id="myDIV">
This is my DIV element.
</div>
</body>
<script>
let selected = "Select";
const result = {
Select: "This is my DIV element.",
Pineapple: "Pineapple are sower.",
Banana: "Bananas are sticky.",
Orange: "Oranges are sower.",
Apple: "Apples are awesome."
};
function myFunction(value) {
selected = value || selected;
var x = document.getElementById("myDIV");
x.innerHTML = result[selected] ;
}
</script>
</html>