jQuery は単純なマルチレベルのリンケージを作成します。ドロップダウン box_jquery を選択します。

今日は、非常に実用的な jQuery プラグインを紹介します。これは、jQuery のマルチレベル連携に基づいた、地方、都市、および地域の選択ドロップダウン ボックスです。この連携ドロップダウン ボックスには言及する価値があります。カスタマイズされ、美化されているため、ブラウザに付属しているものよりもはるかに見栄えが良くなります。さらに、この [選択] ドロップダウン ボックスは、ドロップダウン イベントをバインドし、現在選択されている項目の値を取得することもできます。

HTML コード:

コードをコピー コードは次のとおりです:

 

       

           
           

               
• 湖北省

               
• 广东省

               
• 湖南省

               
• 四川省

           

       

       

       

       

           
           

               
• 武汉市

               
• 深圳市

               
• 长沙市

               
• 成都市

           

       

       

       

       

           
           

               
• 蔡甸区

               
• 南山区

               
• 雨花区

               
• 武侯区

           

       

   

   
    <スクリプト>
        $('[name="nice-select"]').click(関数 (e) {
            $('[name="nice-select"]').find('ul').hide();
            $(this).find('ul').show();
            e.stopPropagation();
        });
        $('[name="nice-select"] li').hover(function (e) {
            $(this).toggleClass('on');
            e.stopPropagation();
        });
        $('[name="nice-select"] li').click(function (e) {
            var val = $(this).text();
            var dataVal = $(this).attr("データ値");
            $(this).parents('[name="nice-select"]').find('input').val(val);
            $('[name="nice-select"] ul').hide();
            e.stopPropagation();
            alert("中文值是：" val);
            alert("数字值です：" dataVal);
            //alert($(this).parents('[name="nice-select"]').find('input').val());
        });
        $(document).click(function () {
            $('[name="nice-select"] ul').hide();
        });
   

css代码：

复制代码代码如下:

本体
{
カラー: #555;
font-size: 14px;
font-family: "Microsoft Yahei" 、 "Microsoft Yahei";
背景色: #EEE;
}

{
カラー: #555;
}
a:ホバー
{
カラー: #f00;
}
入力
{
font-size: 14px;
font-family: "Microsoft Yahei" 、 "Microsoft Yahei";
}
.wrap
{
幅: 500px;
マージン: 100px auto;
}
.h20
{
高さ: 20px;
オーバーフロー: 非表示;
クリア: 両方;
}
.nice-select
{
幅: 245px;
パディング: 0 10px;
高さ: 38px;
境界線: 1 ピクセルの実線 #999;
位置: 相対;
box-shadow: 0 0 5px #999;
背景: #fff url(images/a2.jpg) 繰り返しなし、右中央;
カーソル: ポインタ;
}
.nice-select 入力
{
表示: ブロック;
幅: 100%;
高さ: 38px;
line-height: 38px 9;
境界線: 0;
アウトライン: 0;
背景: なし;
カーソル: ポインタ;
}
.nice-select ul
{
幅: 100%;
表示: なし;
位置: 絶対;
左: -1px;
上: 38px;
オーバーフロー: 非表示;
背景色: #fff;
max-height: 150px;
overflow-y: auto;
境界線: 1 ピクセルの実線 #999;
border-top: 0;
box-shadow: 0 3px 5px #999;
z インデックス: 9999;
}
.nice-select ul li
{
高さ: 30px;
line-height: 30px;
オーバーフロー: 非表示;
パディング: 0 10px;
カーソル: ポインタ;
}
.nice-select ul li.on
{
背景色: #e0e0e0;
}

コードは非常にシンプルなので、ここではあまり説明しません。実際にプレビューしてみると、その効果がいかにシンプルでエレガントであるかがわかり、非常に実用的です。