Question

我有一个ajax方法，该方法会在页面加载后立即运行，而不会监听任何事件。 Ajax从数据库中获取学生ID，并在选择框中显示学生ID。我希望选择框可编辑（http://indrimuska.github.io/jquery-editable-select/）。当选项硬编码在select标记中时，功能$('#studentID').editableSelect();可以完全正常运行。但是，当调用$('#studentID').editableSelect();并从数据库中获取数据时，选择框中没有显示任何数据。

这是写在JavaScript文件中的代码

$('#studentID').editableSelect();

$.ajax({
  type:'POST',
  url:'./public/api/studentID.php',
  success:function(html){
    $('#studentID').html(html);

  }
});

#studentID定义

<label for="studentID">ID</label>
<select id = "studentID" class="form-control">

</select>

php代码

<?php

$connection = new mysqli ("127.0.0.1", "root", "", "test");
if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
}

    $query = "SELECT `SID` FROM `student`  ORDER BY `SID` ";

    $result1= mysqli_query($connection, $query);

    while($row1 = mysqli_fetch_array($result1)):;?>
    <option value="<?php echo $row1[0];?>"><?php echo $row1[0];?></option>
    <?php endwhile;

    $connection->close();
?>

任何帮助将不胜感激。

Answer 1

将editableSelect移至ajax.success方法中。问题是您要初始化一个空的select元素，然后使用异步ajax方法将其插入选项。成功加载数据之后，成功将永远发生，然后您可以使用任何框架/库（包括您想要的editableSelect）来初始化选择。

$.ajax({
  type:'POST',
  url:'./public/api/studentID.php',
  success:function(html){
    let student_el = $('#studentID');
    student_el.html(html);
    student_el.editableSelect();
  }
});

编辑：

您可能没有以正确的方式包含库，因此无论如何，这是包含库的两种方法：

内部标签

<head>
    <!--Include jQuery + you libraries...-->
    <script src="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
    <link href="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet" />
</head>

在ajax调用中

$.ajax({
    type: 'POST',
    url: './public/api/studentID.php',
    success: function(html){
        let student_el = $('#studentID');
        student_el.html(html);
        $.getScript("https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js")
            .then(() => {
                student_el.editableSelect(); // Call this function after the script have been successfully loaded.
            });
        //student_el.editableSelect();
    }
});

Answer 2

为什么不尝试在回调中调用editableSelect

$.ajax({
  type:'POST',
  url:'./public/api/studentID.php',
  success:function(html){
   $('#studentID').html(html);
   $('#studentID').editableSelect();
  }
});

使用ajax方法后，editableSelect（）不会触发

2 个答案:

内部标签

在ajax调用中