更改選擇變化的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>