这是一篇简单的二级联动

最新推荐文章于 2021-06-05 02:24:46 发布

qq_40941808

最新推荐文章于 2021-06-05 02:24:46 发布

阅读量66

点赞数

文章标签：二级联动

本文链接：https://blog.csdn.net/qq_40941808/article/details/103396372

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <form action="">
        <select name="" id="sheng">
            <option value="">请选择省</option>
        </select>
        <select name="" id="shi">
            <option value="">请先选择省</option>
        </select>
    </form>
    <script>
        // 定义省
        var shengArr =[
            {
                id:'1',
                val:'河北'
            },
            {
                id:'2',
                val:'河南'
            },
            {
                id:'3',
                val:'黑龙江'
            }
        ]
        // 定义市
        var shiArr = [
            {
                pid:'1',
                id:'11',
                val:'承德'
            },
            {
                pid:'1',
                id:'12',
                val:'张家口'
            },
            {
                pid:'1',
                id:'13',
                val:'平泉'
            },
            {
                pid:'2',
                id:'21',
                val:'洛阳'
            },
            {
                pid:'2',
                id:'22',
                val:'南阳'
            },
            {
                pid:'2',
                id:'23',
                val:'新乡'
            },
            {
                pid:'3',
                id:'31',
                val:'鸡西'
            },
            {
                pid:'3',
                id:'32',
                val:'哈尔滨'
            }
        ]

        // 动态添加省
        for(var i =0;i<shengArr.length;i++) {
            $('#sheng').append('<option value='+ shengArr[i].id +' >'+ shengArr[i].val +'</option>')
        }
        // 二级联动
        $("#sheng").change(function() {
            // 获取当前的idconsole.log($(this).val())

            // 动态添加之前要清空之前的。
            $('#shi option').remove()
            for(var j=0;j<shiArr.length;j++) {
                if($(this).val() == shiArr[j].pid) {
                    $('#shi').append('<option value='+ shiArr[j].id+'>'+ shiArr[j].val  +'</option>')
                }
            }
            
        })
    </script>
</body>
</html>