> 웹 프론트엔드 > JS 튜토리얼 > 계단식 드롭다운 상자 효과 예제의 JQuery 구현 explain_jquery

계단식 드롭다운 상자 효과 예제의 JQuery 구현 explain_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-16 15:38:53
원래의
1181명이 탐색했습니다.

JQuery를 사용하여 자동차 제조사와 자동차 유형 간의 연계를 구현하는 방법은 다음과 같습니다
렌더링:

 

논리 분석 다이어그램:

html 코드:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>级联下拉框效果</title>

<link rel="stylesheet" type="text/css" href="css/chainselect.css">

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>

<script language="javascript" type="text/javascript" src="js/chainselect.js"></script>

</head>

   

<body>

  <div class="car">

    <span class="carname">

      汽车厂商:

      <select>

        <option value="">请选择汽车厂商</option>

        <option value="BMW">宝马</option>

        <option value="Audi">奥迪</option>

        <option value="VW">大众</option>

      </select>

      <img src="images/pfeil.gif" alt="계단식 드롭다운 상자 효과 예제의 JQuery 구현 explain_jquery"/>

    </span>

    <span class="cartype">

      汽车类型:

      <select></select>

    </span>  

  </div>

</body>

</html>

로그인 후 복사


CSS 코드:

1

2

3

4

5

6

.car {

  text-align:center;

}

.cartype{

  display:none;

}

로그인 후 복사

js 코드:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

$(document).ready(function(){

  //找到下拉框

  var carnameSelect = $(".carname").children("select");

  var cartypeSelect = $(".cartype").children("select");

    

  //给下拉框注册事件

  carnameSelect.change(function(){

    var carnameValue = $(this).val();

    if( carnameValue != ""){

      //carnameValue不为空的情况接着判断

      if(!carnameSelect.data(carnameValue)){

        //不在缓冲区中,需要向服务器请求

        $.post("ChainSelect",{keyword:carnameValue,type:"top"},function(data){

          if (data.length != 0){

            //返回的数据不为空

            cartypeSelect.html("");

            $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);

            for(var i = 0;i < data.length; i++ ){

              $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect);

            }

            cartypeSelect.parent().show();

            carnameSelect.next().show();

          }else{

            //返回的数据为空

            cartypeSelect.parent().hide();

            carnameSelect.next().hide();

          }

          carnameSelect.data(carnameValue,data);

        },"json");

      }else{

        //在缓冲区中

        var data = carnameSelect.data(carnameValue);

        if (data.length != 0){

            //返回的数据不为空

            cartypeSelect.html("");

            $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);

            for(var i = 0;i < data.length; i++ ){

              $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect);

            }

            cartypeSelect.parent().show();

            carnameSelect.next().show();

          }else{

            //返回的数据为空

            cartypeSelect.parent().hide();

            carnameSelect.next().hide();

          }

      }

    }else{

      //carnameValue为空的情况,隐藏第二个下拉框

      cartypeSelect.parent().hide();

      carnameSelect.next().hide();

    }

  });

    

});

로그인 후 복사

위는 JQuery를 사용하여 계단식 드롭다운 상자를 구현하는 간단한 예입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿