javascript - 插入数据后jquery更新下拉列表的div

Question

我有一个下拉列表，我正在从数据库中填充(附加的 ss 和源代码)

 <div id="divmedium">
        <label>Medium:</label> <a data-toggle="modal" role="button" href="#medium_m">[Add New Medium]</a>
        <select data-placeholder="Select Medium" class="select-full"  tabindex="2" id="media" name="media">
        <option value=""></option>
        <?php
        $quee = 'SELECT  `media_id` , `mediatype` FROM `media` WHERE `bus_id_fk` = "'. $_SESSION['bus_id_fk'].'"  order by `mediatype` asc';
        $rs=$DBH->query($quee);
        while($row = $rs->fetch_assoc()){ 
        echo "<option value=$row[media_id]>$row[mediatype]</option>";
        }
        ?>
        </select>
        </div>

如果我点击 [Add New Medium]，会出现一个模型，我可以在其中添加值(value)。

<div id="medium_m" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"><i class="icon-paragraph-justify2"></i> Add New Medium </h4>
        </div>

        <!-- Form inside modal -->
        <form action="#" role="form" id="med1">

            <div class="modal-body with-padding">                          

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-9">
                            <label>First Medium</label>
                            <input type="text" name="fname" placeholder="Eugene" class="form-control">
                        </div>

                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                <button type="submit" id = "m_btn" class="btn btn-primary">Submit form</button>
            </div>

        </form>
    </div>
</div>

点击提交表单(AJAX)

    $(document).ready(function(){
    $('#med1').submit(function(){

            var formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: 'addmedium.php', 
                //data: formData.serialize()
                data: $(this).serialize()
            })
            .done(function(data){
                $('#response').html(data);
                if(data.status == 'success'){
                    $("#divmedium").html(data);

                }else if(data.status == 'error'){
                    alert("Error on query!");
                }
        })
            .fail(function() {

            // just in case posting your form failed
            alert( "Posting failed." );

        });

        // to prevent refreshing the whole page page
        return false;

    });
  });

addmedium.php

    <?php

session_start(); 
INCLUDE './config/databases.php';  
header('Content-type: application/json');

$loc= $_POST['fname'];
$busid=$_SESSION['bus_id_fk'];
$sql = "INSERT INTO media (mediatype,bus_id_fk)VALUES ( '$loc','$busid' )";


//echo $sql;
if ($DBH->query($sql) === TRUE) {
  //  echo "New record created successfully";
} else {
   // echo "Error: " . $sql . "<br>" . $DBH->error;
}
$response_array['status'] = 'success';
echo json_encode($response_array);  

exit;
?>

现在的问题是

1. 数据已插入数据库，但我无法刷新 分区，
2. 点击提交表单后模型没有消失。我需要点击关闭或点击模型以外的其他地方。
3. 点击提交表单后，div divmedium 消失了。

让我知道我做错了什么。

Answer 1

如果你不介意的话，我将从最后开始。

1. 点击提交表单后，div divmedium 消失了。

在您的 AJAX 代码 $("#divmedium").html(data); 中，您将 divmedium 内容替换为 json_encode($response_array);

1. 点击提交表单模型后并没有消失。我需要点击关闭或点击模型以外的其他地方。

我没有看到任何应该关闭它的代码。尝试添加 data-dismiss="modal"

1. 数据已插入数据库，但我无法刷新 div

与第 3 个问题相同，检查 this并编辑您的 AJAX 成功回调。