js_jQuery【下拉菜单联动dom操作】

红目香薰

发布于 2022-11-29 17:35:37

14.1K0

发布于 2022-11-29 17:35:37

文章被收录于专栏：CSDNToQQCode

下拉菜单联动dom操作案例

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <select id="xueli" onchange="updateInfo()">
        <option value="A">大专</option>
        <option value="B">本科</option>
        <option value="C">研究生</option>
    </select>
    <select id="xuexiao">
        <option value="A">A学院</option>
        <option value="B">B学院</option>
        <option value="C">C学院</option>
    </select>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script>
        function updateInfo() {
            var xueli = $("#xueli").val();
            var xuexiao = $("#xuexiao");
            xuexiao.html("");
            var str = "";
            if (xueli == "A") {
                str = "<option value='A'>A学院</option>";
                str += "<option value='B'>B学院</option>";
                str += "<option value='C'>C学院</option>";
            } else if (xueli == "B") {
                str = "<option value='A'>A大学</option>";
                str += "<option value='B'>B大学</option>";
                str += "<option value='C'>C大学</option>";
            } else if (xueli == "C") {
                str = "<option value='A'>A研究所</option>";
                str += "<option value='B'>B研究所</option>";
                str += "<option value='C'>C研究所</option>";
            }
            xuexiao.append(str);
        }
    </script>
</body>

</html>

注意：其它类似的内容无论是多少级联动，都是类似的。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-12-12，如有侵权请联系 cloudcommunity@tencent.com 删除

dom