Home > Article > Web Front-end > Javascript realizes the simple production of two-level cascading menu

Javascript realizes the simple production of two-level cascading menu

PHPzOriginal: 2016-05-16 19:27:481478browse

This article mainly introduces the simple production of two-level cascading menu using JavaScript. Interested friends can refer to

The screenshot of the running effect is as follows:

The specific code is as follows:

<!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=&#39;0&#39;>全部</option>"); 
    if(proName == "1") 
    { 
     $("#city").append("<option value=&#39;1&#39;>广州市</option>"+ 
         "<option value=&#39;2&#39;>深圳市</option>"+ 
         "<option value=&#39;3&#39;>中山市</option>"); 
    } 
    if(proName == "2") 
    { 
     $("#city").append("<option value=&#39;1&#39;>武汉市</option>"+ 
         "<option value=&#39;2&#39;>黄石市</option>"+ 
         "<option value=&#39;3&#39;>黄冈市</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>

For more related tutorials, please visit JavaScript video tutorial

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Color gradient effect_javascript skillsNext article：Color gradient effect_javascript skills

See more

Javascript realizes the simple production of two-level cascading menu

Related articles