修改脚本以根据嵌套下拉选择显示/隐藏 div
我有一些下拉菜单设置，用户从下拉菜单中选择他们的学年，然后根据他们选择的内容，它将显示一个包含一条信息的 div 和另一个他们选择位置的下拉菜单。根据他们选择的位置，它会显示带有该位置签约奖金的 div。
这一切都工作正常，但我想要发生的是当用户选择不同的学年时，我希望它隐藏为他们当前选择的学年打开的 div，然后显示新的 div。因此，如果他们选择了高中，然后选择了初级学院，我希望它关闭高中部门并打开初中部门。与选择位置时相同，如果他们首先选择中心然后选择游击手，我希望它隐藏 hs-center div 并显示 hs-shortstop div。如果这是有道理的话。
脚本：（由另一个问题提供！）
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>
CSS： .hiddenDiv { 显示：无； } .visibleDiv { 显示：块； }
相关 HTML： http://pastebin.com/PULvhY8d
我的脚本using 最初有这个，它隐藏了 div，但导致了我如何嵌套它们的问题。所以我需要一个更具体的替代方案，我只是不知道该怎么做。我对这类事情的了解很少，所以你越简单越好让我更好地理解！
{
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
我将获得比本示例更多的下拉列表和信息，但我只是想在进一步添加内容之前先解决这个问题。
如果您需要我提供任何其他信息，请告诉我，并感谢您的帮助。
I have some drop downs setup where the user selects their school year from a drop down, then depending on what they select, it will show a div with a piece of information and another drop down where they select their position. Based on the position they select, it shows the div with the signing bonus for that position.
That's all working fine, but what I want to happen is when the user selects a different school year, I want it to hide the div that's open for the school year they currently have selected, and then show the new one. So if they have High School selected, and then picked Junior College, I want it to close the high-school div and open the junior-college div. Same with when a position is selected, if they first pick Center and then Shortstop, I want it to hide the hs-center div and show the hs-shortstop div. If that makes sense.
Script: (courtesy of another question here!)
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>
CSS:
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
}
Relevant HTML: http://pastebin.com/PULvhY8d
The script I'm using originally had this in it, which was hiding the divs, but causing issues with having them nested how I do. So I need a more specific alternative, I'm just not sure how to do it. My knowledge of things like this is minimal, so the more you can dumb it down for me to understand the better!
{
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
I will have a lot more drop downs and information than what's in this example, but I just wanted to get this sorted out before I go any further with adding things.
Let me know if you need anything else from me, and thank you for the help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果可以的话，我建议你使用 jQuery。 jQuery 使用起来非常简单，并且会让您每天的生活变得更轻松:) 您必须在基本页面中添加脚本标记，以便 jQuery 加载并在您的应用程序中工作。如果 jQuery 适合您，那么请在此处查看适合您的场景的工作示例：
http://jsfiddle.net/snitin_78/HtHjs/。如果您继续使用 jQuery，请删除代码中各处对 showDiv() 函数的调用。
If you can, then I'd suggest you to use jQuery for this. jQuery is very simple to use and will make you life easier every given day :) You will have to add the script tag in your base page for jQuery to be loaded and work in your application. If jQuery is an option for you then take a look at a working example for your scenario here:
http://jsfiddle.net/snitin_78/HtHjs/. If you go ahead with using jQuery then remove calls to showDiv() function everywhere in your code.