javascript - 将新数据添加到数据库后，更新下拉列表

我有一个通过<select>的下拉列表，该列表是由javascript代码生成的，该代码也来自我的数据库：

function dirfunc(){

  var dirdiv = document.getElementById("dirdiv");
  var ahref = document.getElementById("href");
  var directidarr = new Array();
  var directorarr = new Array();

  <?php

    include("../conn.php");
    if($stmt = $con->prepare("SELECT directorid,directorname FROM directortb")){
      $stmt->execute();
      $stmt->bind_result($directorid,$directorname);
      $counter = 0;
      while($stmt->fetch()){
        ?>
          directidarr[<?php echo $counter; ?>] = "<?php echo $directorid; ?>";
          directorarr[<?php echo $counter; ?>] = "<?php echo $directorname; ?>";
        <?php
        $counter = $counter + 1;
      }
      $stmt->close();
    }
  ?>

  var div = document.createElement("div");
  div.setAttribute("class","form-group");

  var label = document.createElement("label");
  label.setAttribute("class","col-sm-2 control-label");
  label.appendChild(document.createTextNode("Director"));

  var div2 = document.createElement("div");
  div2.setAttribute("class","col-sm-9");

  var sel = document.createElement("select");
  sel.setAttribute("name","director");
  sel.setAttribute("class","form-control");

  for (var x = 0; x < directidarr.length; x++){
    var opt = document.createElement("option");
    opt.appendChild(document.createTextNode(directorarr[x]));
    opt.setAttribute("value", directidarr[x]);
    sel.appendChild(opt);
  }

  var div3 = document.createElement("div");
  div3.setAttribute("class","col-sm-1");

  var div4 = document.createElement("div");
  div4.setAttribute("class","input-group");

  div2.appendChild(sel);
  div3.appendChild(ahref);
  div.appendChild(label);
  div.appendChild(div2);
  div.appendChild(div3);
  dirdiv.appendChild(div);

}

在我的HTML代码中，它在其中生成下拉菜单，其右侧是一个显示模式的按钮。在此模式中，该表格将允许用户为选择下拉菜单添加更多选项。



这是我用来添加数据而不刷新页面的脚本：

$(function() {
    $("#adddirector").click(function(e) {
        e.preventDefault();
        var directorname = $("#directorname").val();
        var dataString = 'directorname=' + directorname;

        if(directorname == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "../action.php",
                data: dataString,
                success:{
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
});

使用这种形式：

<form class="form-horizontal" action="../action.php" method="POST">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Director's Name</label>
    <div class="col-sm-10" id="ccdiv">
      <input type="text" class="form-control" name="directorname" id="directorname" value="" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" name="adddirector" id="adddirector">Add Director <span class="glyphicon glyphicon-plus"></span></button>
    </div>
  </div>
</form>

但是在通过表单或后端/ phpmyadmin添加新数据之后，下拉列表不会更新。用户仍必须刷新页面才能更新下拉菜单。我在脚本中缺少什么或应该做什么？

最佳答案

我假设用于创建新Director的表单在提交时发送ajax请求，该请求由一些PHP代码处理，这些PHP代码将使用此新条目更新数据库。

我建议在此PHP代码中，返回新插入的条目的ID。然后，您可以在ajax调用中添加“成功”函数，一旦插入，它将接收该新id，因此您可以使用它在选择框中添加新行。

编辑：

$(function() {
    $("#adddirector").click(function(e) {
        e.preventDefault();
        var directorname = $("#directorname").val();
        //in jQuery you can pass an object, directorname will now show up as $_POST['directorname'] in your PHP handler.
        var dataObj = {'directorname': directorname}

        if(directorname == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "../action.php",
                data: dataObj,
                //success function should receive the id back as result
                success: function(result){
                    var newId = result;

                    // create and append the new option here with the new id and the given name.
                    var newOption = $('<option></option>');
                    newOption.val(result);
                    newOption.html(directorname);
                    $('.form-control[name="director"]').append(newOption)

                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
});

并确保您的php文件action.php在文件末尾回显新的ID！如果您希望我查看一下，请也将代码发布到该文件中。
这是来自stackoverflow的一个问题，可能会帮助您使用php。 Getting insert id with insert PDO MySQL

关于javascript - 将新数据添加到数据库后，更新下拉列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30589169/