new Option(）联动菜单

最新推荐文章于 2021-04-01 19:25:12 发布

爱吃苹果的牛顿

最新推荐文章于 2021-04-01 19:25:12 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery js 特效

本文链接：https://blog.youkuaiyun.com/qq_16014497/article/details/79467945

jquery 同时被 3 个专栏收录

2 篇文章

订阅专栏

2 篇文章

订阅专栏

特效

1 篇文章

订阅专栏

本文介绍了一个简单的JavaScript示例，展示了如何使用newOption方法创建option标签并利用add方法将其添加到select元素中。通过两个级联的select控件实现城市和地区的选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 //add() 方法用于向 <select> 添加一个 <option> 元素。
 //new Option() 创建一个option标签
 school.add(new Option('北京大学1'))

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>My JSP 'submenu.jsp' starting page</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">  
    <!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    -->  
    <script type="text/javascript">  
    //城市  
    var city = ['请选择','北京','天津','上海','重庆'];  
    //地区  
    var district = [[],  
                    ['东城','西城','朝阳','海淀'],  
                    ['河东','河西','河北','南开'],  
                    ['黄埔','徐汇','长宁','静安'],  
                    ['渝北','渝中','江北','江津']];  
    window.onload=function(){  
        createCity();     
        document.getElementById("city").onchange= createDistrict;  
    };  
    function createCity(){  
        //获得1级菜单select  
        var ci = document.getElementById("city");  
        //为1级菜单select添加option  
        for(var i in city){  
            var op = new Option(city[i],city[i]);  
            ci.options.add(op); 
            
        }  
    }  
    function createDistrict(){  
        //获取当前选中的一级菜单的选项的下标  
        var index = document.getElementById("city").selectedIndex;  
        //获得2级菜单select  
        var di = document.getElementById("district");  
        //清空二级菜单选项  
        di.options.length=0;  
        //为2级菜单select添加option  
        for(var i in district[index]){  
            var op = new Option(district[index][i],district[index][i]);  
            di.options.add(op);  
        }  
    }  
      
    </script>  
  </head>  
    
  <body>  
  <p>请选择所述地区：</p>  
    <select id="city"></select>  
    <select id="district"></select>  
  </body>  
</html>

new Option(） 联动菜单

new Option(）联动菜单