select 在 ajax 请求中创建的标签未显示在 HTML 文件中

Question

我想通过 ajax 请求加载一些选项并将它们显示到 select 标签 HTML 中。在我获取数据并手动创建 select 标签后，HTML 文件不显示 select 标签。我使用 jquery 并将代码放在其他文件中。我尝试在 $(document).ready() 和函数中添加 ajax 请求，但它不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- META SECTION -->
    <title>Atlant - Responsive Bootstrap Admin Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <!-- END META SECTION -->

    <!-- CSS INCLUDE -->
    <link rel="stylesheet" type="text/css" id="theme" href="/public/css/theme-default.css"/>
    <!-- EOF CSS INCLUDE -->


</head>
<body onload="onLoadCenterName()">
<!-- START PAGE CONTAINER -->
<div class="page-container">

    <!-- PAGE CONTENT -->
    <div class="page-content ">


        <!-- PAGE CONTENT WRAPPER -->
        <div class="page-content-wrap">


            <div class="row">
                <div class="col-md-12">

                    <form id="addSiteForm" class="form-horizontal"
                          style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
                        <div class="panel panel-default">
                            <div class="panel-heading ">
                                <h3 class="panel-title "><strong>Add New Site</strong></h3>

                            </div>
                            <div class="panel-body">
                            </div>
                            <div class="panel-body">


                                <div class="form-group">
                                    <label class="col-md-3 col-xs-12 control-label">Select User Type</label>
                                    <div class="col-md-6 col-xs-12">
                                        <select id="addSiteSelectCenterInput" class="form-control select">
                                        </select>
                                        <span class="help-block">Select type of the user account </span>
                                    </div>
                                </div>

                            </div>

                    </form>

                </div>
            </div>

        </div>
        <!-- END PAGE CONTENT WRAPPER -->
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->



<!-- START PRELOADS -->
<audio id="audio-alert" src="/public/audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="/public/audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->

<!-- START SCRIPTS -->
<!-- START PLUGINS -->
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap.min.js"></script>
<!-- END PLUGINS -->

<!-- START THIS PAGE PLUGINS-->
<script type='text/javascript' src='/public/js/plugins/icheck.js'></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.mCustomScrollbar.js"></script>


<!-- END THIS PAGE PLUGINS-->

<!-- START TEMPLATE -->
<!--        <script type="text/javascript" src="/public/js/settings.js"></script>-->

<script type='text/javascript'
        src='/public/js/plugins/validationengine/languages/jquery.validationEngine-en.js'></script>
<script type='text/javascript' src='/public/js/plugins/validationengine/jquery.validationEngine.js'></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap-select.js"></script>
<script type='text/javascript' src='/public/js/plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topCenter.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topLeft.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topRight.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/themes/default.js'></script>
<script type="text/javascript" src="/public/js/plugins.js"></script>
<script type="text/javascript" src="/public/js/actions.js"></script>
<script type="text/javascript" src="/public/js/addSite.js"></script>



<!-- END TEMPLATE -->
<!-- END SCRIPTS -->
</body>
</html>

addSite.js

function onLoadCenterName() {
    $.ajax({
        type: 'GET',
        url: '/centers/getAllCenters',
        dataType: 'json',
        contentType: 'application/json',
        success: function (data) {
            console.log("SUCCESS : ", data);


            let selectList = document.getElementById("addSiteSelectCenterInput");

            $.each(data, function (key, value) {
                console.log(key, value._id, value.centerName);

                const option = document.createElement("option");
                option.value = value._id;
                option.text = value.centerName;
                selectList.appendChild(option);


                // $('#addSiteSelectCenterInput')
                //     .append($("<option></option>")
                //         .attr("value", )
                //         .text(value.centerName));
            });

            console.log(selectList);
            noty({
                text: 'Successful load centers ',
                layout: 'topRight',
                type: 'success',
                timeout: true
            }).setTimeout(5000);
            $.mpb("update", {
                value: 100, speed: 5, complete: function () {
                    $(".mpb").fadeOut(200, function () {
                        $(this).remove();
                    });
                }
            });
        },
        error: function (e) {
            console.log("ERROR : ", e);
            noty({
                text: 'There was an error',
                layout: 'topRight',
                type: 'error',
                timeout: true
            }).setTimeout(5000);
            $.mpb("update", {
                value: 100, speed: 5, complete: function () {
                    $(".mpb").fadeOut(200, function () {
                        $(this).remove();
                    });
                }
            });

        }
    });

}

在 chrom 控制台中，结果在这里：

<select id="addSiteSelectCenterInput" class="form-control select" style="display: none;">
                                        <option value="5d0f86f0a2b7a41bdcd3c91f">sdf</option><option value="5d0f9c4067731820fcabf1eb">scaasdad</option></select>

Answer 1

根据您的控制台结果，<select> 不可见，因为它具有 style="display: none;".

属性

您提供的代码中没有任何内容可以添加该属性，因此您显然没有给我们所有相关代码。

所以您要么需要删除该属性...要么一开始就不要隐藏控件。

要通过 jQuery 显示它，请使用 .show()...

$("#addSiteSelectCenterInput").show()

或者在原版 JS 中更改 style.display 属性...

document.getElementById("addSiteSelectCenterInput").style.display = "";

select 在 ajax 请求中创建的标签未显示在 HTML 文件中

select tag created in ajax request doesn't be shown in HTML file

javascript

ajax

jquery

html-select

jquery-selectors