javascript checkbox select 复选框与下拉列表

最新推荐文章于 2024-05-21 14:15:14 发布

weixin_30602505

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量82

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zousheng7018/archive/2012/10/20/2732440.html

版权

<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <SCRIPT LANGUAGE="JavaScript">
    function show(){
      var h=document.body.scrollTop;
     
      var divh= document.getElementById("mydiv").style.pixelTop;
      document.title=h;
      document.getElementById("mydiv").style.top=(h+100)+"px";
    }

    function closeme(){
        document.getElementById("mydiv").style.display="none";
    }

    window.onscroll=show;

    function selAll(n){
      var sz= document.getElementsByName("hello");  //一个数组
      for(var i=0;i<sz.length;i++){
        
           sz[i].checked=n;  
         
         
      }
    }

    function getValue(){
       var sz= document.getElementsByName("hello");  //一个数组
       for(var i=0;i<sz.length;i++){
         
          if (sz[i].checked==true )
          {
            alert(sz[i].value);
          } 
              
      }
    }

    var sz=["湖南省","湖北省","广东省"];
    var citys=[
      [],
      ["常德","长沙","郴州","衡阳","怀化"],
      ["黄冈","黄石","荆门","荆州","潜江","神农架林区"],
      ["东莞","佛山","广州","河源","惠州","江门"]
    ];
    function initsel(){
       var sheng=document.getElementById("sheng");  //找到第一个下拉列表
       
       for(var i in sz){
           var op=new Option(sz[i],sz[i]);
           sheng.options.add(op);
       }    
    }

    function initshi(){
       //得到 选择了哪个省
       var sheng=document.getElementById("sheng");  //找到第一个下拉列表
       var shi=document.getElementById("shi");  //找到第一个下拉列表
       // alert(sheng.value);  值
       var i=sheng.selectedIndex;
       
       shi.innerHTML="";  //清空
       var op=new Option("请选择一个市","");
       shi.options.add(op);

       for(var j in citys[i]){
           var op=new Option(citys[i][j],citys[i][j]);
           shi.options.add(op);
       }
    }
  </SCRIPT>
 </HEAD>

 <BODY οnlοad="initsel()">
    <div id="mydiv" style="position:absolute;top:100px;left:50px;">
      <a href="javascript:closeme()" >关闭</a><br/>
      <img src="jobs.jpg" />
    </div>
    <div style="height:100px;background:yellow">内容</div>

    <INPUT TYPE="checkbox" NAME="hello" value="1">长沙
    <INPUT TYPE="checkbox" NAME="hello" value="2">湘潭
    <INPUT TYPE="checkbox" NAME="hello" value="3">株洲
    <INPUT TYPE="checkbox" NAME="hello" value="4">常德
    <INPUT TYPE="checkbox" NAME="hello" value="5">湘乡
    <INPUT TYPE="checkbox" NAME="hello" value="6">娄底

    <INPUT TYPE="button" VALUE="  全选  " ONCLICK="selAll(true)">
    <INPUT TYPE="button" VALUE="  不选  " ONCLICK="selAll(false)">
    <INPUT TYPE="button" VALUE="  取值  " ONCLICK="getValue()">

    省<SELECT id="sheng" οnchange="initshi()">
        <option>请选择一个省 
    </SELECT>
    市
    <SELECT id="shi">
        <option>请选择一个市       
    </SELECT>
 </BODY>
 
</HTML>

转载于:https://www.cnblogs.com/zousheng7018/archive/2012/10/20/2732440.html

weixin_30602505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript checkbox select 复选框与下拉列表

<html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""...
复制链接

扫一扫