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 容器用法整理
    C/C++中浮点数格式学习——以IEEE75432位单精度为例
    关于C/C++中的位运算技巧
    [GeekBand] C++11~14
    [GeekBand] 探讨C++新标准之新语法——C++ 11~14
    [GeekBand] 面向对象的设计模式(C++)(2)
    [GeekBand] 面向对象的设计模式(C++)(1)
    [GeekBand] STL与泛型编程(3)
    [GeekBand] STL与泛型编程(2)
    [GeekBand] STL与泛型编程(1)
  • 原文地址:https://www.cnblogs.com/zhangmiaomiao/p/6013539.html
Copyright © 2011-2022 走看看