Javascript는 2단계 계단식 menu_javascript 기술의 간단한 제작을 실현합니다.-JS 튜토리얼-php.cn

Javascript는 2단계 계단식 menu_javascript 기술의 간단한 제작을 실현합니다.

WBOY

풀어 주다： 2016-05-16 15:31:08

원래의

1401명이 탐색했습니다.

이 기사의 예에서는 JavaScript를 사용하여 2단계 계단식 메뉴를 만드는 간단한 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
  
 <title></title> 
  
 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0">  
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <script type="text/javascript" src="../../js/jquery-1.11.1.js"></script> 
 <style type="text/css"> 
  .body_tag{ 
   width: 100%; 
   height: 100%; 
  } 
 </style> 
 <script type="text/javascript"> 
  /** 
   * 
   */ 
   function province() 
   { 
    var proName = $("#areaName").val(); 
    $("#city").empty(); 
    $("#city").append("<option value='0'>全部</option>"); 
    if(proName == "1") 
    { 
     $("#city").append("<option value='1'>广州市</option>"+ 
         "<option value='2'>深圳市</option>"+ 
         "<option value='3'>中山市</option>"); 
    } 
    if(proName == "2") 
    { 
     $("#city").append("<option value='1'>武汉市</option>"+ 
         "<option value='2'>黄石市</option>"+ 
         "<option value='3'>黄冈市</option>"); 
    } 
   } 
 </script> 
 </head> 
 
 <body class="body_tag"> 
  <table id="tab"> 
   <tr> 
   <td> 
    <label for="areaName">省份：</label> 
    <select id="areaName" onchange="province()"> 
     <option value="0">全国</option> 
     <option value="1">广东</option> 
     <option value="2">湖北</option> 
    </select> 
    <label for="city">地市：</label> 
    <select id="city"> 
     <option value="0">全部</option> 
    </select> 
   </td> 
   </tr> 
  </table> 
 </body> 
</html>

로그인 후 복사

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.