Question

我通过ajax添加一些数据，我在成功后将select2初始化为我的元素。我的问题是每次更改.project select时，都会创建另一个.icon select。因此，如果我在页面上更改了.project select 10次我有11 .icon selects。但我只需要一个。

<script src="jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

的script.js：

     $(document).off("change", ".project").on("change", ".project", function (event) {
            $.ajax({
                url: "update.php",
                data: {
                },
                type: "POST",
                success: function (data) {
                   $("#result").html(data);
                 $(".icons").select2({
                    templateResult: formatState,
                    templateSelection: formatState_select
                  });
                }
            })
       });

update.php：

 <select class="icons">
       <?php include('icons.php'); ?>
 </select>

的index.php

<select class="project">
    <option>A</option>
    <option>B</option>
</select>
<div id="result"></div>

Answer 1

我找到了解决方案：

 $(document).off("change", ".project").on("change", ".project", function (event) {

            $(".icons").select2('destroy'); 
            $.ajax({
                url: "update.php",
                data: {
                },
                type: "POST",
                success: function (data) {
                   $("#result").html(data);
                 $(".icons").select2({
                    templateResult: formatState,
                    templateSelection: formatState_select
                  });
                }
            })
       });

如何通过初始化select2来阻止我的ajax函数在另一个选择框之后添加一个？

1 个答案: