jQuery erstellt eine einfache mehrstufige Verknüpfung. Wählen Sie die Dropdown-Liste box_jquery aus

Heute werden wir ein sehr praktisches jQuery-Plug-in vorstellen. Es ist ein Dropdown-Feld zur Auswahl von Provinzen, Städten und Regionen, das auf der mehrstufigen Verknüpfung von jQuery basiert wurde angepasst und verschönert, das Erscheinungsbild ist viel hübscher als das, das mit dem Browser geliefert wird. Darüber hinaus kann dieses Dropdown-Feld „Auswählen“ auch das Dropdown-Ereignis binden und den Wert des aktuell ausgewählten Elements abrufen.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

 

       

           
           

               
• 湖北省

               
• 广东省

               
• 湖南省

               
• 四川省

           

       

       

       

       

           
           

               
• 武汉市

               
• 深圳市

               
• 长沙市

               
• 成都市

           

       

       

       

       

           
           

               
• 蔡甸区

               
• 南山区

               
• 雨花区

               
• 武侯区

           

       

   

   
    <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>             alarm("中文值是：" val);<br>             alarm("数字值是：" 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代码：

复制代码 代码如下:

         Körper
           {
             Farbe: #555;
               Schriftgröße: 14px;
             Schriftfamilie: „Microsoft Yahei“, „Microsoft Yahei“;
             Hintergrundfarbe: #EEE;
}
a
           {
             Farbe: #555;
}
a:schweben
           {
              Farbe: #f00;
}
Eingabe
           {
               Schriftgröße: 14px;
             Schriftfamilie: „Microsoft Yahei“, „Microsoft Yahei“;
}
.wrap
           {
               Breite: 500 Pixel;
              Rand: 100 Pixel automatisch;
}
.h20
           {
             Höhe: 20px;
               Überlauf: versteckt;
               klar: beides;
}
.nice-select
           {
               Breite: 245px;
               padding: 0 10px;
              Höhe: 38px;
              Rand: 1 Pixel durchgezogen #999;
Position: relativ;
             box-shadow: 0 0 5px #999;
Hintergrund: #fff url(images/a2.jpg) no-repeat rechts in der Mitte;
              Cursor: Zeiger;
}
.nice-select input
           {
              display: block;
               Breite: 100 %;
              Höhe: 38px;
              Zeilenhöhe: 38px 9;
Rand: 0;
Umriss: 0;
            Hintergrund: keiner;
              Cursor: Zeiger;
}
          .nice-select ul
           {
               Breite: 100 %;
             Anzeige: keine;
Position: absolut;
               links: -1px;
              oben: 38px;
               Überlauf: versteckt;
              Hintergrundfarbe: #fff;
               maximale Höhe: 150 Pixel;
               overflow-y: auto;
              Rand: 1 Pixel durchgezogen #999;
                 border-top: 0;
             box-shadow: 0 3px 5px #999;
             Z-Index: 9999;
}
.nice-select ul li
           {
              Höhe: 30px;
               Zeilenhöhe: 30 Pixel;
               Überlauf: versteckt;
               padding: 0 10px;
              Cursor: Zeiger;
}
         .nice-select ul li.on
           {
             Hintergrundfarbe: #e0e0e0;
}

Der Code ist sehr einfach, daher werde ich ihn hier nicht zu sehr erklären. Sie können ihn selbst in der Vorschau ansehen und werden sehen, wie einfach und elegant der Effekt ist, und er ist sehr praktisch.