jQuery ajax读取本地json文件三级联动下拉框

要使用jQuery Ajax读取本地JSON文件并更新三级联动下拉框，你需要确保同源策略（Same-origin policy）不会阻止你读取本地文件。在大多数现代浏览器中，直接通过JavaScript读取本地文件是不被允许的，除非页面是本地加载的（即使用file://协议）。

以下是使用jQuery Ajax读取本地JSON文件并更新三级联动下拉框的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动下拉框</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<select id="level1">
    <option value="">选择一级分类</option>
</select>
<select id="level2">
    <option value="">选择二级分类</option>
</select>
<select id="level3">
    <option value="">选择三级分类</option>
</select>
 
<script>
$(document).ready(function() {
    $.ajax({
        url: 'categories.json', // 假设你的JSON文件名为categories.json
        dataType: 'json',
        success: function(data) {
            // 假设你的JSON结构是这样的：
            // [
            //     {
            //         "name": "一级分类1",
            //         "children": [
            //             {
            //                 "name": "二级分类1-1",
            //                 "children": [
            //                     {
            //                         "name": "三级分类1-1-1"
            //                     }
            //                 ]
            //             }
            //         ]
            //     }
            // ]
            var level1 = $('#level1');
            var level2 = $('#level2');
            var level3 = $('#level3');
 
            // 填充一级分类
            $.each(data, function(i, item) {
                level1.append($('<option>').text(item.name).attr('value', i));
            });
 
            level1.change(function() {
                level2.empty();
                level3.empty();
                var selectedLevel1 = $(this).val();
                var level1Children = data[selectedLevel1].children;
                if (level1Children) {
                    $.each(level1Children, function(i, item) {
                        level2.append($('<option>').text(item.name).attr('value', i));
                    });
                }
            });
 
            level2.change(function() {
                level3.empty();
                var selectedLevel2 = $(this).val();
                var level2Children = data[level1.val()].children[selectedLevel2] ? data[level1.val()].children[selectedLevel2].children : null;
                if (level2Children) {
                    $.each(level2Children, function(i,

jQuery ajax读取本地json文件三级联动下拉框

评论已关闭

推荐阅读