首页 > 代码库 > 实现简单的二级级联

实现简单的二级级联

2024-07-07 08:03:49   222人阅读

实现简单的二级级联


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="http://www.mamicode.com/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=http://www.mamicode.com/‘0‘>所有");
             if(proName == "1")
             {
                 $("#city").append("<option value=http://www.mamicode.com/‘1‘>广州市"+
                 				   "<option value=http://www.mamicode.com/‘2‘>深圳市"+
                 				   "<option value=http://www.mamicode.com/‘3‘>中山市");
             }
             if(proName == "2")
             {
                 $("#city").append("<option value=http://www.mamicode.com/‘1‘>武汉市"+
                 				   "<option value=http://www.mamicode.com/‘2‘>黄石市"+
                 				   "<option value=http://www.mamicode.com/‘3‘>黄冈市");
             }
         }
    </script>
  </head>
  
  <body class="body_tag">
     <table id="tab">
         <tr>
           <td>
             <label for="areaName">省份：</label>
             <select id="areaName" onchange="province()">
                  <option value="http://www.mamicode.com/0">全国</option>
                  <option value="http://www.mamicode.com/1">广东</option>
                  <option value="http://www.mamicode.com/2">湖北</option>
             </select>
             <label for="city">地市：</label>
             <select id="city">
                  <option value="http://www.mamicode.com/0">所有</option>
             </select>
           </td>
         </tr>
     </table>
  </body>
</html>

2、结果

（1）初始化


（2）选择广东


（3）选择湖北


联系
我们