Question

我有一个下拉列表，使用嵌入在html中的php动态填充类别，如下所示：

<select name="select" id="choosevidCat" required class="choosevidCat">
<option>Choose the Catagory for your Video Here</option>
            <?php 
    $sql = ("SELECT albumId, albumName FROM albums");
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($mysqli, $sql);

while($row = mysqli_fetch_array($result)) {
$albumid = ($row['albumId']);
$album_name = ($row['albumName']);
echo "<option value=".$albumid. ">$album_name</option>";
}

?>


<option id="createCat" value="createCatagory">Create New Catagory Here</option>
</select>

在id为“createCatagory”的选项上打开弹出窗口，允许使用ajax调用在服务器上创建新的类别文件夹，如下所示：

<script type="text/javascript">

$(document).ready(function() {


        $("#vidcatBut").click(function()    {

//  event.preventDefault();


        var albumName = $("#albumName").val();


        $.post("includes/createAlbum.php",{albumName: albumName}, function(json)
         {

            if(json.result === "success") {

        $("#vidcatResult").html( "The Album "+albumName+"has been Created!");


    }else{
        $("#vidcatResult").html(json.message);
    }   

         })

$('#choosevidCat').load(location.href + "#choosevidCat");

    });//click function
});//ready function
</script>

我想要发生的是当单击创建按钮时，选择列表将重新加载并反映下拉列表中的新类别，而不需要在弹出框关闭后刷新页面。这可能吗

Answer 1

您可以使用jQuery＆＃39; append将新类别附加到包含您的类别的容器中。

示例：

$(".categoryContainer").append('<div class="category">My new Category</div>');

您可以轻松修改上述内容，以附加到option list而不是容器

注意：我建议您在AJAX通话的success回调中执行此操作，以确保在附加之前已将其保存在您的服务器上。

＆＃13;

$("#appendBtn").click(function() {
  $(".container").append("<div class='category'>New Category</div>");

})

＆＃13;

.container {
  margin: 0 auto;
  width: 320px;
  height: auto;
  padding-bottom: 64px;
  background-color: #999;
}
#appendBtn {
  display: block;
  margin: 12px auto;
  padding: 12px;
  font-size: 14px;
  cursor: pointer;
}
.category {
  width: 90%;
  height: 32px;
  margin: 0 auto;
  line-height: 32px;
  text-align: center;
  background-color: #eee;
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="category">Category</div>
  <div class="category">Category</div>
  <div class="category">Category</div>
</div>

<button id="appendBtn">Append Category</button>

＆＃13;

Answer 2

您可以使用jQuery的option删除所有当前.empty()，然后在POST成功回调中加载选择框的内容，如下所示：

$.post("includes/createAlbum.php",{albumName: albumName}, function(json)
{

    if(json.result === "success") {

        $("#vidcatResult").html( "The Album "+albumName+"has been Created!");

        // First remove all the existing options
       $('#choosevidCat').empty();

        // Load the content:
        $('#choosevidCat').load(location.href + "#choosevidCat > *");

    } else {
        $("#vidcatResult").html(json.message);
    }   

})

在#choosevidCat > *功能中使用load()会将所有#choosevidCat个孩子（所有选项）添加到选择框中。否则（仅使用#choosevidCat），jQuery会将选择框添加到现有的选择框中，如下所示：

<select name="select" id="choosevidCat">

    <select name="select" id="choosevidCat">

        ...

    </select>

</select>

重新加载选择下拉框而不刷新页面

2 个答案: