Modifier le contenu DIV sur SELECT modifier

Question

Je cherche une méthode pour modifier le contenu d'un div lorsqu'une option d'une liste déroulante est sélectionnée.

je suis tombé sur les éléments suivants:

<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> 

Cela a bien fonctionné sur son propre, mais je veux l'utiliser avec le script suivant:

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

Lorsque vous l'utilisez à côté de cette chainedmenu script, il charge juste tout le contenu de la boîte DIV à la fois, plutôt que chaque option div quand une option SELECT est choisie.

Des idées sur ce que je peux utiliser avec ce script chainedmenu pour obtenir différents contenus DIV à afficher pour différentes options SELECT?

Voici une page de test: http://freeflamingo.com/t/new.html

Answer 1

Il est pas tout à fait clair où vous allez mal ici mais je l'image que c'est une rupture de la convention en termes de multiples années ID du même nom ou tout simplement un problème avec les multiples sélections que vous utilisez avec ce joli script DD archaïque; Je vous suggère de trouver une alternative jQuery et ou d'essayer ceci:

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

De cette façon, ayant toutes vos sélections dans .nav (ou tout ce que vous appelez) de changer l'un d'entre eux appellera les méthodes nécessaires pour montrer la div tu désires.

Answer 2

Je vois quelques problèmes avec ce que vous avez posté, d'abord vous avez le même identifiant sur les deux boîtes de sélection qui vont causer des problèmes. Vous exécutez également le code jquery qui définit la fonction de modification avant que la sélection ait été créée. Donc, vous pouvez soit déplacer le JavaScript à la fin de la div ou vous ne pouvez l'exécuter qu'une fois la page est prête. Je suggère ce dernier et il y a un exemple ci-dessous. Faites cela et corrigez les identifiants sur les sélections et vous devriez être beaucoup plus proche de ce que vous vouliez.

$(document).ready(function() 
{ 

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

Oh et une dernière note rapide le code que vous travaillez avec ne semble exiger qu'une valeur soit définie pour les éléments de sélection assurez-vous que vous définissez également que pour la sélection que vous voulez afficher/masquer les divs avec.

Answer 3

En regardant la page que vous avez publiée sur Steve, il semblerait que votre problème concerne les identifiants non uniques.

Changez vos sélections afin qu'ils ont chacun leur propre identifiant unique comme ceci:

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

changer ensuite votre javascript pour faire référence à l'identifiant de celui que vous voulez changer le divs

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

Enfin, ce script utilise la valeur de l'option sélectionnée pour trouver la div à afficher, de sorte que vous avez besoin de vos divs de boîte pour avoir des identifiants valides. HTML ids ne peuvent pas commencer avec des chiffres, donc changer votre balisage pour:

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

et définissez les valeurs dans vos sélectionner des options pour correspondre à ces ids

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