更改选择变化的DIV内容

Question

我正在寻找一种方法，当选择下拉选项上的选项时如何更改div的内容。

我碰到了以下内容：

<script type="text/javascript" src="jquery.js"></script> 
<!-- the select --> 
<select id="thechoices"> 
    <option value="box1">Box 1</option> 
    <option value="box2">Box 2</option> 
    <option value="box3">Box 3</option> 
</select> 

<!-- the DIVs --> 
<div id="boxes"> 
    <div id="box1"><p>Box 1 stuff...</p></div> 
    <div id="box2"><p>Box 2 stuff...</p></div> 
    <div id="box3"><p>Box 3 stuff...</p></div> 
</div> 

<!-- the jQuery --> 
<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript"> 

$("#thechoices").change(function(){ 
    $("#" + this.value).show().siblings().hide(); 
}); 

$("#thechoices").change(); 

</script> 

这个工作在它自己的罚款，但我想用下面的脚本中使用它：

http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

当使用它旁边这个chainedmenu脚本，它只是一次加载所有的DIV框内容，而不是每个选择SELECT选项时的div选项。

任何想法，我可以用这个链接菜单脚本获得不同的DIV内容显示不同的SELECT选项？

这是一个测试页面：http://freeflamingo.com/t/new.html

Answer 1

这不是完全清楚你在哪里怎么回事错了，但我在同一个名称的多个ID或只是一个问题的方面倒是像它的公约的一些重大您使用这个漂亮的DD脚本的多重选择;我建议找一个jQuery替代和或尝试此：具有.nav内所有的选择

<div class="nav"> 
    <select> 
     <option value="1">Box 1</option> 
    ... 
    </select> 

    <select> 
     <option value="6">Box 6</option> 
    ... 
    </select> 
</div> 

<div> 
    <div id="box1"><p>Box 1 stuff...</p></div> 
... 
</div> 

$(".nav select").change(function(){ 
    $("#box" + $(this).val()).show().siblings().hide(); 
}); 

这种方式（或者无论你怎么称呼它），改变其中任何一个会调用所需的方法来显示DIV你的愿望。

Answer 2

我发现您发布的内容存在一些问题，首先您在两个选择框上都有相同的ID，这会导致问题。此外，您正在运行jquery代码，该代码在构建select之前定义了更改函数。因此，您可以将JavaScript移动到最终div后面，也可以只在页面准备就绪后运行。我建议后者，下面有一个例子。做到这一点，并确定身份证上的选择，你应该更接近你想要的。

$(document).ready(function() 
{ 

$("#thechoices").change(function() 
{ 
    $("#" + this.value).show().siblings().hide(); 
}); 
} 

哦，最后一个快速注意到你正在使用的代码似乎确实需要一个值来进行选择的项目设置，确保您还可以设置为你想要显示/选择隐藏用的div。

Answer 3

看着你发布到Steve的页面，它看起来像你的问题是与非唯一的ID。

改变你的选择，使他们每个人都有自己独特的ID如下：

<select name="firstlevel" class="..." id="firstlevel">...</select> 
<select name="secondlevel" class="..." id="secondlevel">...</select> 

然后改变你的JavaScript引用您想更改的div的一个的ID

$("#secondlevel").change(function() { 
    ... 
}); 

最后，该脚本正在使用所选选项的值来查找要显示的div，因此您需要使用box div来生成有效的ID。 HTML ID不能以数字开头，所以更改您的标记：

<div id="boxes"> 
    <div id="box1">...</div> 
    <div id="box2">...</div> 
    <div id="box3">...</div> 
</div> 

而在你选择的选项设置的值，以匹配这些ID

<select ... id="secondlevel"> 
    <option value="box1">1 months XBox live (1 ref)</option> 
    etc... 
</select>