Probleme sur des boutons Dropdown menu

[Coeur]

Bonjour, j essaye d'avoir 2 boutons alignés l un a coté de l autre. Le premier bouton pour les pays contiens la liste des pays. Le deuxième bouton contient les villes groupés par pays. J'ai caché chaque groupe, pour n' en affiché qu un seul, a partir du moment qu'on a choisis un pays.
par exemple si j ai sélectionné France j aurai le groupe de la liste des villes de France qui s affiche dans le bouton 2.
Voici mon code pour l instant mais ca ne fonctionne pas, il doit y avoir une erreur quelques part mais je ne la trouve pas.
Et aussi avec la fonction jquery j arrive a prendre le texte (du pays ou de la ville) mais j aimerai aussi prendre l'image du drapeau en même temps et je ne sais pas trop comment faire ca.
si quelqu un pourrai m aider ce serai gentil. Merci d avance.

Code: Tout sélectionner

<form>
    <div class="dropdown">
        <div class="btn-group"><a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">PAYS</a>
            <ul class="dropdown-menu">
                <li onclick="showtext('Fr');">
                    <input type="hidden" name="France" id="Fr" value="1" 1>
                    <a href="#"><img src="images/Flag_Fr.png">France</a>
                </li>
                <li onclick="showtext('It');">
                    <input type="hidden" name="Italie" id="It" value="2" 2>
                    <a href="#"><img src="images/Flag_Itpng">Italie</a>
                </li>
            </ul>
        </div>
        <div class="btn-group"> <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">VILLES</a>
            <ul class="dropdown-menu" id="Ville_Fr" style="display:none;">
                <li>Paris</li>
                <li>Marseille</li>
                <li>...</li>
            </ul>
            <ul class="dropdown-menu" id="Ville_It" style="display:none;">
                <li>Rome</li>
                <li>Milan</li>
                <li>...</li>
            </ul>
        </div>
    </div>

</form>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>


<script type="text/javascript">
    function show(obj) {
        window.document.getElementById(obj).style.display = "inline-block";
    }

    function hide(obj) {
        window.document.getElementById(obj).style.display = "none";
    }

    function showtext(List_Pays ') {
        hide('Ville_Fr'); hide('Ville_It);
            show('Ville_' + List_Pays ');
            }
            $(".dropdown-menu li a").click(function() {
                var selText = $(this).text();
                $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
            });


[Coeur]

je m excuse j ai fais des fautes des frappes en écrivant mon code dans le post du dessus, est ce qu un admin pourrai remplacer mon code par ce lien svp ?http://jsfiddle.net/comubbtL/ ce sera plus lisible pour tout le monde.

[Coeur]

Ben du coup ca y est j arrive a faire fonctionner mes boutons, dans le JS j avai écris

Code: Tout sélectionner

function showtext(List_Pays) {
        hide('Ville_Fr'); hide('Ville_It);
            show('Ville_' + List_Pays ');
            }


je l ai remplacé par

Code: Tout sélectionner

window.showtext=function(List_Pays) {
        hide('Ville_Fr'); hide('Ville_It');
            show('Ville_' + List_Pays);
            }


par contre je bloque toujours avec la fonction jQuery pour que le drapeau soit affiché a coté du nom du pays quand on a cliqué sur le premier bouton.

du coup voici le lien du code mis a jourhttp://jsfiddle.net/comubbtL/5

[Galdon]

Il y a pas mal de problème dans ton code. Il faut absolument éviter de mélanger le javascript et le HTML, c'est à dire qu'il ne faut pas utiliser des attributs comme onclick, à la place il faut sélectionner l'élément (par exemple avec un sélecteur jQuery) et lui coller un event listener.
En l’occurrence, le fait de faire ça t'aurais entre autre épargné le 1er problème de scope de la fonction showtext.

J'ai repris ton code et je l'ai un peu modifié, tu peux aller voir ici : http://jsbin.com/narokukuzi/1/edit?html,js,output

Code: Tout sélectionner

<form>
    <div class="dropdown">
        <div class="btn-group pays">
            <button class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">
              <img class="flag">
              <span class="toggle-label">PAYS</span>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <input type="hidden" name="France" id="Fr" value="1" 1>
                    <a href="#"><img src="http://vignette1.wikia.nocookie.net/destinypedia/images/0/06/French_Flag_Icon.png">France</a>
                </li>
                <li>
                    <input type="hidden" name="Italie" id="It" value="2" 2>
                    <a href="#"><img src="http://vignette2.wikia.nocookie.net/destinypedia/images/3/35/Italian_Flag_Icon.png">Italie</a>
                </li>
            </ul>
        </div>
        <div class="btn-group ville">
            <button class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">
                <span class="toggle-label">VILLES</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu"></ul>
        </div>
    </div>
   
    <div id="villes">
        <ul id="Ville_Fr">
            <li><a href="#">Paris</a></li>
            <li><a href="#">Marseille</a></li>
            <li><a href="#">...</a></li>
        </ul>
        <ul id="Ville_It">
            <li><a href="#">Rome</a></li>
            <li><a href="#">Milan</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </div>
</form>

Code: Tout sélectionner

jQuery(document).ready(function($){
  // Choix d'un pays
  $('.btn-group.pays li').click(function(e){
    // Affichage du drapeau
    var flagImgUrl = $(this).find('img').attr('src');
    $(this).closest('.btn-group').find('.dropdown-toggle img').attr('src', flagImgUrl);
   
    // Chargement des villes de ce pays
    var listeVilles = $('.btn-group.ville ul.dropdown-menu');
    listeVilles.empty();
    var pays = $(this).find('> input').attr('id');
    $('#villes > #Ville_' + pays + ' > li').clone().appendTo(listeVilles);
  });
 
  // Libellé toggle automatique
  $('.dropdown-menu').click(function(e){
    if (!$(e.target).is('.dropdown-menu > li *')) {
      return;
    }
    var selectedElement = $(e.target).closest('.dropdown-menu > li');
    $(this).closest('.btn-group').find('.dropdown-toggle .toggle-label').html(selectedElement.text());
  });
});

[Coeur]

Merci bien pour les conseils, j ai suivis vos tutos sur jQuery c'est très bien expliqué, j ai juste noté dans la partie http://www.finalclap.com/tuto/cours-jquery-61/animation-65/ le test 4 sur le easing ne fonctionne plus, apparement il faut juste mettre à jour le lien du fichier .js de la librairie externe qui est appelé.

[Galdon]

Ah oui en effet, merci pour l'info ^^

[Coeur]

je viens de voir un truc et je ne sais pas comment fixer cela. Ce qu il ce passe c est que par exemple si je choisis France je peu ensuite choisir Marseille. Le problème c'est que dans le cas ou on rechange le pays donc je choisirai Italie le bouton des Villes affichent toujours Marseille.
Je ne sais pas si vous voyez ce que je veux dire ?

[Galdon]

Oui je vois, il suffit d'ajouter quelques lignes de code dans le click listener sur ".btn-group.pays li" pour réinitialiser le label du dropdown ville.