jquery三级联动

Posted 2021-02-04 shenbo666

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery三级联动相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery手写三级联动</title>
</head>
<body>
<select name="" id="selProvince">
    <option value="">----请选择----</option>
</select>
<select name="" id="selCity">
    <option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
    <option value="">----请选择----</option>
</select>
</body>
<script src="./jquery/jquery.2.0.0.js"></script>
<script>
    var iNum1;
    var iNum2;
    var aProvince = [‘1‘, ‘2‘, ‘3‘];
    var aCity = [[‘11‘, ‘12‘, ‘13‘], [‘21‘, ‘22‘, ‘23‘], [‘31‘, ‘32‘, ‘33‘]];
    var aCountry = [[[‘111‘, ‘112‘], [‘121‘, ‘122‘], [‘131‘, ‘132‘]], [[‘211‘, ‘212‘], [‘221‘, ‘222‘], [‘231‘, ‘232‘]], [[‘311‘, ‘312‘], [‘321‘, ‘322‘], [‘331‘, ‘332‘]]];

    $(function () {
        for (var i = 0; i < aProvince.length; i++) {
            $(‘#selProvince‘).append(‘<option>‘ + aProvince[i] + ‘</option>‘);
        }
        ;

        $(‘#selProvince‘).change(function () {
            //清除之前的选择  这里不能用find
            $(‘#selCity‘).children().not(‘:eq(0)‘).remove();
            //选择自己省对应的市
            iNum1 = $(this).find(‘option:selected‘).index();
            //去掉第一个请选择
            aaCity = aCity[iNum1 - 1];
            for (var j = 0; j < aaCity.length; j++) {
                $(‘#selCity‘).append(‘<option>‘ + aaCity[j] + ‘</option>‘)
            }
        });

        $(‘#selCity‘).change(function () {
            //清除之前的选择
            $(‘#selCountry‘).children().not(‘:eq(0)‘).remove();
            //选择自己市对应的县
            iNum2 = $(this).find(‘option:selected‘).index();
            var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
            for (var n = 0; n < aaCountry.length; n++) {
                $(‘#selCountry‘).append(‘<option>‘ + aaCountry[n] + ‘</option>‘)
            }
        });
    })
</script>
</html>

以上是关于jquery三级联动的主要内容，如果未能解决你的问题，请参考以下文章