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(함수 (e) {
            $(this).toggleClass('on');
            e.stopPropagation();
        });
        $('[name="nice-select"] li').click(함수 (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();
            Alert("中文值是：" val);
            Alert("数字值是：" dataVal);
            //alert($(this).parents('[name="nice-select"]').find('input').val());
        });
        $(문서).click(함수 () {
            $('[name="nice-select"] ul').hide();
        });
   

css代码：

复主代码 代码如下:

         본문
            {
             색상: #555;
               글꼴 크기: 14px;
             글꼴 모음: "Microsoft Yahei" , "Microsoft Yahei";
             배경색: #EEE;
}
ㅇ
            {
             색상: #555;
}
a:호버
            {
              색상: #f00;
}
입력
            {
               글꼴 크기: 14px;
             글꼴 모음: "Microsoft Yahei" , "Microsoft Yahei";
}
.wrap
            {
               너비: 500px;
              여백: 100px 자동;
}
.h20
            {
             높이: 20px;
               오버플로: 숨김;
               지우기: 둘 다;
}
.nice-select
            {
               너비: 245px;
               패딩: 0 10px;
              높이: 38px;
              테두리: 1px 실선 #999;
위치: 상대;
             상자 그림자: 0 0 5px #999;
배경: #fff url(images/a2.jpg) 반복 없음 오른쪽 중앙;
              커서: 포인터;
}
.nice-select 입력
            {
              디스플레이: 차단;
               너비: 100%;
              높이: 38px;
              줄 높이: 38px 9;
테두리: 0;
개요: 0;
            배경: 없음;
              커서: 포인터;
}
          .nice-select ul
            {
               너비: 100%;
             디스플레이: 없음;
위치: 절대;
               왼쪽: -1px;
              상단: 38px;
               오버플로: 숨김;
              배경색: #fff;
               최대 높이: 150px;
               Overflow-y: 자동;
              테두리: 1px 실선 #999;
                 테두리 상단: 0;
             상자 그림자: 0 3px 5px #999;
             Z-색인: 9999;
}
.nice-select ul li
            {
              높이: 30px;
               줄 높이: 30px;
               오버플로: 숨김;
               패딩: 0 10px;
              커서: 포인터;
}
         .nice-select ul li.on
            {
             배경색: #e0e0e0;
}

코드가 매우 간단하기 때문에 여기서는 자세히 설명하지 않겠습니다. 직접 들어보시면 효과가 얼마나 간단하고 우아하며 매우 실용적인지 알 수 있습니다.