Probleme sur des boutons Dropdown menu

Toutes vos questions sur jQuery, CSS, HTML5, mise en page...
Coeur
 
Messages: 6
Inscription: 05 Fév 2016, 05:51

Probleme sur des boutons Dropdown menu

Messagede Coeur » 05 Fév 2016, 13:36

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
 
Messages: 6
Inscription: 05 Fév 2016, 05:51

Re: Probleme sur des boutons Dropdown menu

Messagede Coeur » 07 Fév 2016, 07:34

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
 
Messages: 6
Inscription: 05 Fév 2016, 05:51

Re: Probleme sur des boutons Dropdown menu

Messagede Coeur » 07 Fév 2016, 08:37

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

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: Probleme sur des boutons Dropdown menu

Messagede Galdon » 09 Fév 2016, 22:45

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());
  });
});
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol

Coeur
 
Messages: 6
Inscription: 05 Fév 2016, 05:51

Re: Probleme sur des boutons Dropdown menu

Messagede Coeur » 11 Fév 2016, 17:08

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

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: Probleme sur des boutons Dropdown menu

Messagede Galdon » 12 Fév 2016, 01:05

Ah oui en effet, merci pour l'info ^^
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol

Coeur
 
Messages: 6
Inscription: 05 Fév 2016, 05:51

Re: Probleme sur des boutons Dropdown menu

Messagede Coeur » 12 Fév 2016, 01:41

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 ?

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: Probleme sur des boutons Dropdown menu

Messagede Galdon » 13 Fév 2016, 00:12

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.
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol


Retourner vers HTML / CSS / Javascript

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités