实现简单的二级级联

实现简单的二级级联


1、源码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!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{
	         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" οnchange="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>

2、结果

(1)初始化


(2)选择广东


(3)选择湖北




原文地址:https://www.cnblogs.com/hzcya1995/p/13315121.html