jQuery crée un lien simple à plusieurs niveaux Sélectionnez la liste déroulante box_jquery

Aujourd'hui, nous allons partager un plug-in jQuery très pratique. Il s'agit d'une liste déroulante de sélection de province, de ville et de région basée sur la liaison multi-niveaux jQuery. été personnalisé et embelli, l'apparence est bien plus jolie que celle fournie avec le navigateur. De plus, cette liste déroulante Sélectionner peut également lier l'événement déroulant et obtenir la valeur de l'élément actuellement sélectionné.

code html :

Copier le code Le code est le suivant :

 

       

           
           

               
• 湖北省

               
• 广东省

               
• 湖南省

               
• 四川省

           

       

       

       

       

           
           

               
• 武汉市

               
• 深圳市

               
• 长沙市

               
• 成都市

           

       

       

       

       

           
           

               
• 蔡甸区

               
• 南山区

               
• 雨花区

               
• 武侯区

           

       

   

   
    <script><br>         $('[name="nice-select"]').click(function (e) {<br>             $('[name="nice-select"]').find('ul').hide();<br>             $(this).find('ul').show();<br>             e.stopPropagation();<br>         });<br>         $('[name="nice-select"] li').hover(function (e) {<br>             $(this).toggleClass('on');<br>             e.stopPropagation();<br>         });<br>         $('[name="nice-select"] li').click(function (e) {<br>             var val = $(this).text();<br>             var dataVal = $(this).attr("data-value");<br>             $(this).parents('[name="nice-select"]').find('input').val(val);<br>             $('[name="nice-select"] ul').hide();<br>             e.stopPropagation();<br>             alert("中文值是：" val);<br>             alert("数字值是：" dataVal);<br>             //alert($(this).parents('[name="nice-select"]').find('input').val());<br>         });<br>         $(document).click(function () {<br>             $('[name="nice-select"] ul').hide();<br>         });<br>     </script>

css代码：

复制代码 代码如下 :

         corps
           {
             couleur : #555;
               taille de la police : 14 px ;
             famille de polices : "Microsoft Yahei", "Microsoft Yahei";
             couleur de fond : #EEE;
>
une
           {
             couleur : #555;
>
a: survolez
           {
              couleur : #f00;
>
entrée
           {
               taille de la police : 14 px ;
             famille de polices : "Microsoft Yahei" , "Microsoft Yahei";
>
.wrap
           {
               largeur : 500 px ;
             marge : 100 px automatique ;
>
.h20
           {
             hauteur : 20 px ;
               débordement : masqué ;
               clair : les deux ;
>
.nice-select
           {
               largeur : 245 px ;
               remplissage : 0 10 px ;
              hauteur : 38 px ;
              bordure : 1 px solide #999 ;
position : relative ;
             box-shadow : 0 0 5px #999;
arrière-plan : #fff url(images/a2.jpg) pas de répétition au centre droit ;
              curseur : pointeur ;
>
.nice-select input
           {
              affichage : bloquer ;
               largeur : 100 % ;
              hauteur : 38 px ;
              hauteur de ligne : 38px 9;
Bordure : 0 ;
Contour : 0;
            arrière-plan : aucun ;
              curseur : pointeur ;
>
          .nice-select ul
           {
               largeur : 100 % ;
             affichage : aucun ;
position : absolue ;
               gauche : -1 px ;
              haut : 38 px ;
               débordement : masqué ;
              couleur de fond : #fff;
               hauteur maximale : 150 px ;
               overflow-y: auto;
              bordure : 1 px solide #999 ;
                 border-top : 0;
             ombre-boîte : 0 3px 5px #999;
             indice z : 9999 ;
>
.nice-select ul li
           {
              hauteur : 30 px ;
               hauteur de ligne : 30 px ;
               débordement : masqué ;
               remplissage : 0 10 px ;
              curseur : pointeur ;
>
         .nice-select ul li.on
           {
             couleur de fond : #e0e0e0;
>

Le code est très simple, donc je ne l'expliquerai pas trop ici. Vous pouvez le prévisualiser vous-même et vous saurez à quel point l'effet est simple et élégant, et il est très pratique.