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选项。

我可以使用这个chainedmenu脚本来获取不同的DIV内容以显示不同的SELECT选项吗？

以下是测试页：http://freeflamingo.com/t/new.html

Answer 1

我发现您发布的内容存在一些问题，首先您在两个选择框上都有相同的ID会导致问题。您还运行了jquery代码，该代码在构建select之前定义了change函数。因此，您可以将JavaScript移动到最终div之后，或者只有在页面准备好后才能运行它。我建议后者，下面有一个例子。这样做并修复选择上的ID，你应该更接近你想要的。

$(document).ready(function() 
{

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

哦，最后一个快速记下你正在使用的代码似乎需要为选择项设置一个值，确保你也为你想要显示/隐藏div的选项设置了。

Answer 2

目前还不完全清楚你在哪里出错了，但是我想象一下，就同一个名字的多个ID而言，这是一种常规的破坏，或者只是你用这个相当古老的DD的多个选择的问题脚本;我建议找一个jQuery替代品，或者尝试这个：

<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();
});

这样在.nav（或任何你称之为）的所有选择中更改其中任何一个都会调用所需的方法来显示你想要的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，因此您需要使用div 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>

在SELECT更改时更改DIV内容

3 个答案: