onchange事件

最新推荐文章于 2024-05-15 19:49:23 发布

不仅是记忆

最新推荐文章于 2024-05-15 19:49:23 发布

阅读量512

点赞数

分类专栏： js 文章标签： onchange事件 js修改事件

本文链接：https://blog.csdn.net/a916123063/article/details/51769334

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
</head>
<body>
    <select name="" id="p">
 
    </select>
 
    <select name="" id="c">
        <option value="0">请选择</option> 
    </select>
 
    <script type="text/javascript">
    var p = document.getElementById('p');//city城市
    var c = document.getElementById('c');//city城市
 
    var pros = ['河北省','河南省','山东省','山西省'];
    var citys = [];//所有的城市列表
    citys[0] = ['石家庄','保定','承德','唐山'];//河北省的市的列表
    citys[1] = ['郑州','洛阳','开封','南阳'];
    citys[2] = ['济南','济宁','青岛','烟台'];
    citys[3] = ['太原','大同','长治','晋中'];
 
 
    function init(){
        //遍历省份
        var str = "";
        for(var i=0;i<pros.length;i++){
            str += "<option value='"+i+"'>"+pros[i]+"</option>";
        }
        p.innerHTML = str;
    }
 
    //执行函数
    init();
 
    //当下拉框的值发生改变的时候触发
    p.onchange = function(){
        //获取当前选中之后下拉框的值
        var v = this.value;
        //获取城市列表
        var cs = citys[v];
        //声明变量
        var str = "";
        //拼接option字符串
        for(var i=0;i<cs.length;i++){
            str += "<option value='"+i+"'>"+cs[i]+"</option>";
        }
        ///文本设置
        c.innerHTML = str;
    }
 
 
    </script>
</body>
</html>