zoukankan      html  css  js  c++  java
  • (实用篇)jQuery二级联动代码

    jquery二级联动城市代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>jQuery 二级联动</title> 
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
    <script type="text/javascript"> 
    
    var currentShowCity=0;
    
    $(document).ready(function(){
       $("#province").change(function(){
           $("#province option").each(function(i,o){
               if($(this).attr("selected"))
               {
             
                   $(".city").hide();
                   $(".city").eq(i).show();
                   currentShowCity=i;
               }
           });
       });
       $("#province").change();
    });
    
    function getSelectValue(){
    
        
        alert("1级="+$("#province").val());
         
        $(".city").each(function(i,o){
                       
             if(i == currentShowCity){
                alert("2级="+$(".city").eq(i).val());
             }
            
       });
    
    }
    
    
    </script> 
    </head> 
     
    <body> 
     
       <select id="province"> 
              <option>----请选择省份----</option> 
           <option>北京</option> 
           <option>上海</option> 
           <option>江苏</option> 
       </select> 
       <select class="city"> 
               <option>----请选择城市----</option> 
       </select> 
       <select class="city"> 
           <option>东城</option> 
           <option>西城</option> 
           <option>崇文</option> 
           <option>宣武</option> 
           <option>朝阳</option> 
       </select>  
       <select class="city"> 
           <option>黄浦</option> 
           <option>卢湾</option> 
           <option>徐汇</option> 
           <option>长宁</option> 
           <option>静安</option> 
       </select> 
       <select class="city"> 
           <option>南京</option> 
           <option>镇江</option> 
           <option>苏州</option> 
           <option>南通</option> 
           <option>扬州</option> 
       </select> 
    
    <INPUT TYPE="button" VALUE="点我" ONCLICK="getSelectValue();">
    
    </script>
    </body> 
    </html> 

    以下是实例界面

  • 相关阅读:
    短视频不为人知的素材来源 以及平台推荐的黑盒机制
    说什么月入几万 我是不是应该一头撞死?
    Python 3 进阶 —— 使用 PyMySQL 操作 MySQL
    CentOS安装Subversion 1.9.*版本客户端
    [算法]PHP随机合并数组并保持原排序
    CentOS安装Memcached
    Git Windows客户端保存用户名和密码
    ApiGen 4.0配置项
    ApiGen安装
    SQL服务器模式
  • 原文地址:https://www.cnblogs.com/zhangmiaomiao/p/6013539.html
Copyright © 2011-2022 走看看