码迷,mamicode.com
首页 > 其他好文 > 详细

实现简单的二级级联

时间:2014-05-13 09:24:01      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:jquery   javascript   二级级联   jsp   

实现简单的二级级联


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{
	        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>

2、结果

(1)初始化

bubuko.com,布布扣

(2)选择广东

bubuko.com,布布扣

(3)选择湖北

bubuko.com,布布扣



实现简单的二级级联,布布扣,bubuko.com

实现简单的二级级联

标签:jquery   javascript   二级级联   jsp   

原文地址:http://blog.csdn.net/you23hai45/article/details/25565659

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!