jQuery mencipta pautan berbilang peringkat mudah Pilih drop-down box_jquery

Hari ini kami akan berkongsi pemalam jQuery yang sangat praktikal Ia adalah kotak lungsur turun wilayah, bandar dan wilayah berdasarkan pautan berbilang peringkat jQuery Perlu dinyatakan bahawa kotak lungsur turun pautan ini telah disesuaikan dan dicantikkan, penampilannya jauh lebih cantik daripada yang disertakan dengan penyemak imbas. Selain itu, kotak lungsur Pilih ini juga boleh mengikat acara lungsur dan mendapatkan nilai item yang dipilih pada masa ini.

kod html:

Salin kod Kod adalah seperti berikut:

 

       

           
           

               
• 湖北省

               
• 广东省

               
• 湖南省

               
• 四川省

           

       

       

       

       

           
           

               
• 武汉市

               
• 深圳市

               
• 长沙市

               
• 成都市

           

       

       

       

       

           
           

               
• 蔡甸区

               
• 南山区

               
• 雨花区

               
• 武侯区

           

       

   

   
   
        $('[name="nice-select"]').klik(fungsi (e) {
            $('[name="nice-select"]').find('ul').hide();
            $(this).cari('ul').tunjukkan();
            e.stopPropagation();
        });
        $('[name="nice-select"] li').tuding(fungsi (e) {
            $(this).toggleClass('on');
            e.stopPropagation();
        });
        $('[name="nice-select"] li').klik(fungsi (e) {
            var val = $(this).text();
            var dataVal = $(this).attr("data-value");
            $(this).parents('[name="nice-select"]').find('input').val(val);
            $('[name="nice-select"] ul').hide();
            e.stopPropagation();
            makluman("中文值是：" val);
            alert("数字值是：" dataVal);
            //alert($(this).parents('[name="nice-select"]').find('input').val());
        });
        $(dokumen).klik(fungsi () {
            $('[name="nice-select"] ul').hide();
        });
   

css代码：

复制代码 代码如下:

         badan
           {
             warna: #555;
               saiz fon: 14px;
             keluarga fon: "Microsoft Yahei" , "Microsoft Yahei";
             warna latar belakang: #EEE;
}
a
           {
             warna: #555;
}
a:tuding
           {
              warna: #f00;
}
input
           {
               saiz fon: 14px;
             keluarga fon: "Microsoft Yahei" , "Microsoft Yahei";
}
.balut
           {
               lebar: 500px;
              jidar: 100px auto;
}
.h20
           {
             tinggi: 20px;
               limpahan: tersembunyi;
               jelas: kedua-duanya;
}
.elok-pilih
           {
               lebar: 245px;
               padding: 0 10px;
              tinggi: 38px;
              sempadan: 1px pepejal #999;
jawatan: relatif;
             bayang-bayang kotak: 0 0 5px #999;
latar belakang: #fff url(images/a2.jpg) tiada ulangan di tengah kanan;
              kursor: penunjuk;
}
.input pilihan yang bagus
           {
              paparan: blok;
               lebar: 100%;
              tinggi: 38px;
              ketinggian garisan: 38px 9;
Sempadan: 0;
Garis besar: 0;
            latar belakang: tiada;
              kursor: penunjuk;
}
          .pilihan bagus ul
           {
               lebar: 100%;
             paparan: tiada;
jawatan: mutlak;
               kiri: -1px;
              atas: 38px;
               limpahan: tersembunyi;
              warna latar belakang: #fff;
               ketinggian maksimum: 150px;
               limpahan-y: auto;
              sempadan: 1px pepejal #999;
                atas sempadan: 0;
             bayang kotak: 0 3px 5px #999;
             indeks z: 9999;
}
. nice-select ul li
           {
              ketinggian: 30px;
               ketinggian garisan: 30px;
               limpahan: tersembunyi;
               padding: 0 10px;
              kursor: penunjuk;
}
         .pilihan bagus ul li.on
           {
             warna latar belakang: #e0e0e0;
}

Kod ini sangat ringkas, jadi saya tidak akan menerangkannya terlalu banyak di sini Jika anda melihatnya sendiri, anda akan tahu betapa mudah dan elegan kesannya, dan ia sangat praktikal.