15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 js

JavaScript实现简单二级联动

闫志林| 发布于 2021-10-28 18:48:54| 535阅读| 1点赞| 0评论
举报

js二级联动

html

<div>
        <select style="width: 200px;" id="selc">
            <option value="">请选择option>
            <option value="50">JAVAoption>
            <option value="49">C++option>
        select>
        <select style="width: 200px;" id="sub">
        select>
    div>

js代码

var sel = document.getElementById('selc');
    var sub = document.getElementById('sub');
    sel.addEventListener('change', function () {
        var cid = sel.value;
        //重新选择清空选项
        sub.options.length = 0;
        var request = new XMLHttpRequest();

        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                if (request.status === 200) {
                    let temp = jsON.parse(request.responseText);            
                    for (let i = 0; i < temp.length; i++) {
                        let op = document.createElement('option');
                        op.setAttribute("value",temp[i].id);
                        op.appendChild(document.createTextNode(temp[i].name));
                        sub.appendChild(op);
                    }
                }
            }
        }

        request.open('get', '{:url("admin/exams/getlist")}' + '?id=' + cid);
        request.send();
    });

效果

学习下原生dom操作

1

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

闫志林
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部