我需要能够在 5 列中显示 2 行文本，并且每列文本需要不同，
全部基于 1 个下拉列表？
<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var selectMenu = document.getElementById("selectMenu");
for (var i=0; i<=selectMenu.options.length -1; i++)
{
hideDiv(selectMenu.options[i].value);
}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
</script>
<html>
<body onload="hideAllDivs();">
<select id="selectMenu"
onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber"> Select Industry </option>
<option value="formNumber1"> Industry1 </option>
<option value="formNumber2"> Industry2 </option>
<option value="formNumber3"> Industry3 </option>
<option value="formNumber4"> Industry4 </option>
</select>
</body>
When I try to duplicate this code it does not hide the divs?
<div id="formNumber"></div>
<div id="formNumber1">Visitors:200<br>leads:200</div>
<div id="formNumber2">Visitors:300<br>leads:300</div>
<div id="formNumber3">Visitors:500<br>leads:500</div>
<div id="formNumber4">Visitors:700<br>leads:700</div>我不确定如何通过一个下拉选择器执行以下操作？
最佳答案
请记住，该 ID 必须是唯一的。因此，如果重复的 div block 与相同的 div id 相同，则它不会起作用。您可以改用 data-id 属性。
此外，使用 jQuery 非常方便，而且您无需遍历 div 来隐藏或显示它们，它允许使用一种方法做到这一点:
$(selector).hide() 或 $(seceltor).show() wjere 选择器是任何有效的 css 选择器。你可以找到他们here
哦哦哦!我接到你了!看看那个例子，它可以满足您的需求。如果在select中选择了industry，它会出现，如果再选择它就会隐藏。但是由于脚本依赖于change 事件，您必须选择另一个行业来隐藏以前的。
let selectMenu = document.querySelector('#selectMenu')
let industryColumns = document.querySelector('.industry-columns')
let industries = {
1: {
columns: {
1: {
visitors: 200,
leads: 100
},
2: {
visitors: 300,
leads: 200
},
3: {
visitors: 500,
leads: 400
},
4: {
visitors: 600,
leads: 600
},
}
},
2: {
columns: {
1: {
visitors: 500,
leads: 100
},
2: {
visitors: 300,
leads: 600
},
3: {
visitors: 500,
leads: 4900
},
4: {
visitors: 300,
leads: 800
},
}
},
3: {
columns: {
1: {
visitors: 200,
leads: 700
},
2: {
visitors: 400,
leads: 700
},
3: {
visitors: 500,
leads: 400
},
4: {
visitors: 200,
leads: 400
},
}
},
4: {
columns: {
1: {
visitors: 200,
leads: 100
},
2: {
visitors: 300,
leads: 200
},
3: {
visitors: 500,
leads: 400
},
4: {
visitors: 600,
leads: 600
},
}
},
}
function createIndustriesOptions(industries) {
Object.keys(industries).forEach(id => {
let option = document.createElement('option')
option.value = id
option.textContent = `Industry ${id}`
selectMenu.appendChild(option)
})
}
function fillIndustryColumns(indId) {
let industry = industries[indId]
Object.keys(industry.columns).forEach(col => {
let data = industry.columns[col]
let column = industryColumns.querySelector(`[data-column="${col}"]`)
Object.keys(data).forEach(key => {
column.querySelector(`.${key}`).textContent = data[key]
})
})
}
function clearIndustry() {
let columns = [...industryColumns.querySelectorAll('[data-column]')];
columns.forEach(column => {
column.querySelector('.leads').textContent = ''
column.querySelector('.visitors').textContent = ''
})
}
document.addEventListener('DOMContentLoaded', e => {
createIndustriesOptions(industries)
})
document.querySelector('#selectMenu').addEventListener('change', e => {
let industryId = e.target.value;
if(industryId) {
industryColumns.classList.add('visible');
fillIndustryColumns(industryId)
} else {
industryColumns.classList.remove('visible');
clearIndustry()
}
});.select-menu {
margin-bottom: 5px;
}
.industry-columns {
display: none;
}
.industry-columns.visible {
display: block;
}
.industry-wrapper {
display:inline-block;
width: 120px;
border: 1px dashed #666;
}
.industry>div {
padding: 5px;
}
.industry>div:not(:last-child) {
border-bottom: 1px dashed #666;
}<html>
<body>
<select id="selectMenu" class="select-menu">
<option value=""> Select Industry </option>
</select>
<div class="industry-columns">
<div class="industry-wrapper">
<div class="industry" data-column="1">
<div>Visitors:<span class="visitors"></span></div>
<div>Leads:<span class="leads"></span></div>
</div>
</div>
<div class="industry-wrapper">
<div class="industry" data-column="2">
<div>Visitors:<span class="visitors"></span></div>
<div>Leads:<span class="leads"></span></div>
</div>
</div>
<div class="industry-wrapper">
<div class="industry" data-column="3">
<div>Visitors:<span class="visitors"></span></div>
<div>Leads:<span class="leads"></span></div>
</div>
</div>
<div class="industry-wrapper">
<div class="industry" data-column="4">
<div>Visitors:<span class="visitors"></span></div>
<div>Leads:<span class="leads"></span></div>
</div>
</div>
</div>关于javascript - 我需要能够在 5 列中显示 2 行文本，并且每列文本需要不同，全部基于 1 个下拉列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53862933/