这是我的代码＆＃34;最小化＆＃34;：

Question

我一直试图让select2插件工作，这在其他页面上运行良好，但是当我试图在一段时间内运行它只给了我一些headeches因为它只在最后一行工作。

这是我的代码＆＃34;最小化＆＃34;：

<?php
include("setting.php");
$pdosys=conectsys();
@session_start ();
?>

<html>
    <head>
        <title>Test Error Select2</title>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    </head>
    <body>
        <h1>While</h1>
        <?php
        $searchid=$pdosys->prepare("SELECT * FROM tableclients WHERE id > 0");
        $searchid->execute();
        while($line=$searchid->fetch(PDO::FETCH_ASSOC)){
            ?>
            <a style="cursor:pointer;" data-toggle="modal" data-target="#myModal<?=$line[id]?>"><i class="material-icons">mode_edit</i></a><!-- Troggles modal -->
            <?php
            echo $line[id];
            echo "<br>";
            Modal($line[id]);//calls the function with modal but it only appears when the edit button is clicked
        }
        ?>
        <h1>End of while</h1>
    </body>
</html>

<?php
    function Modal($id) {//function with modal content that's determined by $id
        include_once("setting.php");
        $pdomodal=conectsys();
        ?>
        <div id="myModal<?=$id?>" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button style="opacity: 1;" type="button" class="close" data-dismiss="modal"><i style="color:red;" class="material-icons">close</i></button>
                        <h4 class="modal-title">Edit</h4>
                    </div>
                    <div class="modal-body">
                        <script>//script that troggles select2
                            $(document).ready(function() {
                            $('.<?=$id?>').select2();
                            });
                        </script>
                        <!-- Select that select2 only work on the last row (the content still works on every row)-->
                        <select id="list1"  class="<?=$id?>">
                            <option value="">Choose the location</option>
                            <?php
                            $searchclients=$pdomodal->prepare("SELECT * FROM tableclients WHERE name = robert");
                            $searchclients->execute();
                            while($clients=$searchclients->fetch(PDO::FETCH_ASSOC)){
                                echo "<option value=".$clients["adress"].">".$clients["adress"]."</option>";
                            }
                            ?>
                        </select>
                        <br>
                    </div>
                </div>
            </div>
        </div>
<?php
    }
?>

$id生成模态变量，因此当我在while循环中调用它时，我可以获得多个内容，我尝试使用相同的逻辑来选择我从select类获取值，但是当我执行该代码时，只有最后一行才能工作，可能是我试图使用的<script>有些问题（只是复制了官方网站上的例子），anny关于如何实施它的想法？

Obs：我检查了源代码，每个值都收到了正确的值，所以我确定问题出在了我的路上调用select2。

Answer 1

这可能是因为你需要在它重新呈现的id之后移动脚本标记。这只是一个猜测。选择两个是棘手的。 jQuery将以递归方式遍历与其选择器匹配的每个项目，因此您可以尝试使所有ID相同并调用页面底部的函数。它完全是prefrence，因为代码是代码，但我也建议调查Mustache Templating。它是一个额外的abstration层，可以在这些情况下提供帮助。

Answer 2

问题已经解决，就像我在select2 function电话中看到问题时，我已经尝试过这样做了：

 $(document).ready(function() {
     $('.<?=$id?>').select2();
 });

它使用循环中的最后一个值生成所有select2 onload ，所以为了解决这个问题，我刚刚创建了一个名称不同的新函数（使用$id ）并将其附加到我的代码上的onclick事件。所以最后的结果是这样的：

<强> HTML

<input type='radio' required value="locate" onclick="select2<?=$id?>();">
<select id="list1"  class="<?=$id?>">
    <option>Test Location 1</option>
    <option>Test Location 2</option>
<select>

<强> JS

function select2<?=$id?>(){
    $('.<?=$id?>').select2();
}

我的技能非常差，所以可能有更好的解决方案来调用它，但在我的情况下它很好。

当php循环时，select2插件在内部无法正常工作

这是我的代码＆＃34;最小化＆＃34;：

2 个答案: