如何用JS实现下拉列表-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何用JS实现下拉列表

2016-06-02 10:34:16 1864 1

请问如何用JS实现这种样式的下拉列表,最好还能使用循环输出各个年份。

取消 提交回答
全部回答(1)
  • 云栖技术
    2019-07-17 19:24:11
    1.
    <form name="f1">
    <select name="s1" onchange="chg(document.f1.s1,document.f1.s2)">
    <option value="江西">江西</option>
    <option value="福建">福建</option>
    </select>
    <select name="s2">
    <option value="1">1</option>
    </select>
    </form>
    <script>
    //创建对象,数据,值,文本
    function obj(aData,aValue,aText){ 
        this.Data=aData;
        this.Value=aValue;
        this.Text=aText;
    }
    //设置选项数据数组,可以添加多个参数为"源地址,选择值,选择文本"
    var Set_data=new Array(    
        new obj('江西','南昌','南昌'),
        new obj('江西','九江','九江'),
        new obj('福建','福州','福州'),
        new obj('福建','厦门','厦门')
        );
    //该函数接受两个参数——两个下拉菜单
    function chg(parent,child){
        //以父菜单的选中选项的值,子菜单,和选项数数据组为参数调用chg函数
        chgComitem(parent.options[parent.selectedIndex].value,child,Set_data);
    }
    function chgComitem(parentValue,child,objs){ //改变子菜单
        //1.以子菜单为参数调用函数
        DelAllComitem(child);
        //2.遍历所有的选项数据
        for(i=0;i<objs.length;i++){
            //如果选项数据的Data与父菜单选中值一样的话
            if (objs[i].Data==parentValue)
                //3.以子菜单,选项数据的值,选项数据的文本作为参数调用AddComitem
                AddComitem(child,objs[i].Value,objs[i].Text);        
        }
    }
    //1.删除子菜单的所有元素
    function DelAllComitem(aList){   
        //传入的是select元素,让options全为null
        for(i=aList.options.length-1;i>=0;i--)
        aList.options[i]=null;
    }
    //3.添加子菜单的元素
    function AddComitem(aList,aValue,aText){
        //用传入的文本和值来创建option
        var aOption=new Option(aText,aValue);
        //插入option(注:length属性比最大下标大1)
        aList.options[aList.options.length]=aOption;
    }
    </script>
    
    2.
    <%@ page language="Java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
      <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script language="JavaScript" type="text/javascript">
         //定义了城市的二维数组,里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
         var city=[
         ["北京","天津","上海","重庆"],
         ["南京","苏州","南通","常州"],
         ["福州","福安","龙岩","南平"],
         ["广州","潮阳","潮州","澄海"],
         ["兰州","白银","定西","敦煌"]
         ];
    
         function getCity(){
             //获得省份下拉框的对象
             var sltProvince=document.form1.province;
             //获得城市下拉框的对象
             var sltCity=document.form1.city;         
             //得到对应省份的城市数组
             var provinceCity=city[sltProvince.selectedIndex - 1];
     
             //清空城市下拉框,仅留提示选项
             sltCity.length=1;
     
             //将城市数组中的值填充到城市下拉框中
             for(var i=0;i<provinceCity.length;i++){
                 sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
             }
         }
     </script>
     </HEAD>
     
     <BODY>
     <FORM METHOD=POST ACTION="" name="form1">
             <SELECT NAME="province" onChange="getCity()">
                 <OPTION VALUE="0">请选择所在省份 </OPTION>
                 <OPTION VALUE="直辖市">直辖市 </OPTION>
                 <OPTION VALUE="江苏省">江苏省 </OPTION>
                 <OPTION VALUE="福建省">福建省 </OPTION>
                 <OPTION VALUE="广东省">广东省 </OPTION>
                 <OPTION VALUE="甘肃省">甘肃省 </OPTION>
             </SELECT>
             <SELECT NAME="city">
                 <OPTION VALUE="0">请选择所在城市 </OPTION>
             </SELECT>
         </FORM>
     </BODY>
    </HTML>
    
    3.
    <!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=utf-8" />  
    <title>Untitled Document</title>  
    <script>  
    function setSecond(obj){  
        var val = obj.value;  
        if(val == 'en'){  
            var sec = document.getElementById('second');  
            sec.options[0] = new Option("one","one");  
            sec.options[1] = new Option("two","two");  
        }else{  
            var sec = document.getElementById('second');  
            sec.options[0] = new Option("一","one");  
            sec.options[1] = new Option("二","two");//可设置循环配置,也可一个一个配置  
        }     
    }  
    </script>  
    </head>  
      
    <body>  
    <div>   
        <select id="first" onchange="setSecond(this)">  
            <option value="en">en</option>  
            <option value="zh">zh</option>  
        </select>   
    </div>  
    <div>   
        <select id="second">  
      
        </select>   
    </div>  
    </body>  
    </html>  
    0 0
相关问答

1

回答

在支付宝小程序 V8 Worker中的 JS 函数和对象之间有什么关系?

2022-05-09 22:01:39 95浏览量 回答数 1

1

回答

JS 对象的内部结构和功能很大程度上是由构造它的函数决定的吗?

2022-04-18 11:02:54 207浏览量 回答数 1

1

回答

在原生的JS中用于异步请求网络的是哪个对象呀?

2021-11-02 22:59:18 362浏览量 回答数 1

1

回答

js改变储存的dom对象

2016-07-14 14:39:29 1588浏览量 回答数 1

1

回答

js/jquery怎么取后台request.setAttribute的对象或者值?

2016-07-13 16:07:59 3960浏览量 回答数 1

1

回答

有一段基于JQuery的JS对象,谁能解释下这段代码?

2016-07-12 16:31:22 1373浏览量 回答数 1

1

回答

关于JS对象的一个问题

2016-07-11 17:49:44 1811浏览量 回答数 1

1

回答

JS 给对象加上时间,单独获取ID能添加上,集体添加就不行,求教

2016-07-06 11:09:34 1350浏览量 回答数 1

1

回答

js 拼字符串好,还是用jquery对象好?

2016-07-05 15:17:21 1708浏览量 回答数 1

1

回答

JavaScript 怎么删除一个对象的样式中的某个属性?

2016-06-12 15:40:51 2468浏览量 回答数 1
+关注
云栖技术
社区爱好者,专为云栖社区服务!
34
文章
897
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载