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

原创设计定制开发

满足您的个性化需求

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

0 1

JavaScript实现简单二级联动

闫志林| 发布于 2021-10-28 18:48:54| 593阅读| 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();
    });