Ajax Modal：将所选值返回到下拉列表到更新表单答案

【问题标题】：Ajax Modal : Return selected value to dropdown list into update formAjax Modal：将所选值返回到下拉列表到更新表单
【发布时间】：2018-05-16 08:45:13
【问题描述】：

我一直在这个网站上到处搜索并尝试了许多解决方案，但没有一个对我有用！我的问题如下：

我有 2 张桌子：

TABLE INFO_STATUS (status_id, status_desc)
和
TABLE INFO_MARQUES (comp_id, comp_desc, comp_status(INT))

我正在链接 comp_status 和 status_id 以便 INFO_MARQUES 中的行获得当前状态。

我想做什么？（从这里编辑）
2。获取位于comp_status的info_marques的当前状态值，当我打开更新表单时自动在下拉列表中选择

示例我想更新这家公司：

comp_id : 15
comp_desc : WEISS
comp_status : 1

假设在表 info_status 中：

status_id = 1
status_desc = FOLLOW-UP

当我打开更新表单时，我想看到这个： Check this

我的模态：(WORKING)

                        <select class="form-control" name="select_status">
                        <option value=''>Selectionner</option>
                    <?php 
try {
                    $user = new USER();
                    $output = array();
                    $stmt = $user->runQuery("SELECT * FROM info_status");
                    $stmt->execute();
                    $result=$stmt->fetchAll();

                    foreach($result as $row) {
                        echo '<option value='.$row["status_id"].'>'.$row["status_desc"].'</option>';
                    }
}
                    catch(PDOException $e) {
                    printf('Erreur MySQL %d : %s', $e->getCode(), $e->errorInfo[2]);
                    exit;

}
?>
                    </select>

我的阿贾克斯

$(document).on('click', '.update', function(){ 
        var user_id = $(this).attr("id");
        var array = [];
        $('select :selected').each(function(i,value)
        {
        array[i] = $(this).val();
        });     
        $.ajax({
            url:"partials/test/fetch_single.php",
            method:"POST",
            data:{user_id:user_id},
            dataType:"json",
            success:function(data)
            {
                $('#userModal').modal('show');
                $('#comp_name').val(data.comp_name);
                $('#comp_parent').val(data.comp_parent);

                $.each($('.select_status option'),function(a,b){

                if($(this).val()== data.comp_status){   
                $(this).attr('selected',true)
                }

                });

                $('.modal-title').text("Modifier un fichier client");
                $('#user_id').val(user_id);
                $('#user_uploaded_image').html(data.user_image);
                $('#action').val("Edit");
                $('#operation').val("Edit");

            }

        })
    });

然后是我的 PHP 页面：(WORKING)

if(isset($_POST["user_id"]))
{
    $output = array();
    $statement = $connection->prepare(
        "SELECT * 
FROM info_marques AS m 
LEFT JOIN info_status AS s 
ON s.status_id = m.comp_status 
WHERE m.id = '".$_POST["user_id"]."' 
LIMIT 1"
    );
    $statement->execute();
    $result = $statement->fetchAll();
    foreach($result as $row)
    {
        $output["comp_name"] = $row["comp_name"];
        $output["comp_parent"] = $row["comp_parent"];
        $output["comp_status"] = $row["status_desc"];

    }

    echo json_encode($output);
}

我在这里错过了什么？

干杯

【问题讨论】：

#comp_name、#comp_parent 等在哪里？
我只展示了这个问题涉及的模态部分，但这两个在我的模态中工作正常。
$('#select_status').val(data.comp_status); 不起作用，因为 select 元素在其中需要 option 元素。您需要填充 select 并将 selected 设置为 AJAX 输出的代码。
感谢您的提示，所以我需要将该代码包含到我的 php 代码中并返回一个 .html 值？那么我需要编写 2 个 SQL 查询吗？
您需要SELECT 查询才能在 AJAX 请求之前输出到模式。在 AJAX success 上，循环通过 options 并设置属性选择如果 comp_status 等于选项值。

标签： php jquery sql ajax modal-dialog

【解决方案1】：

我不确定是否要填充下拉菜单或根据您的回复选择数据，但如果您要选择数据并且下拉菜单中已有选项，您可以这样做：

 $.each($('#select_status option'),function(a,b){

    if($(this).val() == data.comp_status){
              $(this).attr('selected',true)
    }

    });

但如果你想填充，你将不得不使用 .append() 附加它。如果问题有什么不同，请告诉我，我可能会给你一个解决方案。

正如您所说，您需要所有状态，然后显示当前状态。我建议使用 .done() ajax 方法。它会派上用场，例如：

$("#select_status").prop('disabled',true)
$('#select_id').append('<option>Please wait... Fetching status</option>');
var status_options;
$.ajax({
 url:"your_page_for_all_status.php",
 success: function(e){
    //add <option> tags to a variable using loop
 }

}).done(function(){
 $.ajax({
   //ajax call to get current data. Compare and select data here. write your $.each here
  }).done(function(){
     $("#select_status").prop('disabled',false);
  });
});

你现在应该可以走了！！！如果我把它弄复杂了，我很抱歉。

【讨论】：

您好 Shubham，感谢您的帮助，进一步解释：我只有一个下拉列表，其中列出了我的 SQL 数据库表 INFO_STATUS 中的所有可用状态，例如：| Status_id | Status_desc | --> 1 follow-up 2 active 3 stable 4 etc.... 然后我将添加更多时间。所以我需要在更新公司资料时将它们列到下拉列表中，并显示公司目前拥有的价值
如果我没记错的话，我需要两个 SQL 查询来发送回 AJAX。 QUERY 1: collecting all data in INFO_STATUS // // QUERY 2 : Fetching the current status value in INFO_MARQUES（参见我原帖中的 SQL 查询）然后在 ajax 中比较两者，这是正确的方法吗？
是的，您将需要两个查询，第一个是获取所有状态，第二个是获取当前状态。您可以先填充所有状态，然后获取现有值。填充所有值后，您可以使用与上面相同的代码来匹配并选择当前状态。我知道事情变得复杂了。我正在添加一个代码框架作为您可以检查的答案。
谢谢舒巴姆！它确实有效并且比我的代码更干净，我欠你很多时间

【解决方案2】：

我找到了一个可行的解决方案，但不确定它是否非常干净。

对于那些有兴趣了解的人：

HTML

<select class="form-control" name="select_status" id="status">
                        <option value=''>Selectionner</option>
                    <?php 
try {
                    $user = new USER();
                    $output = array();
                    $stmt = $user->runQuery("SELECT * FROM info_status");
                    $stmt->execute();
                    $result=$stmt->fetchAll();

                    foreach($result as $row) {
                        echo '<option value='.$row["status_id"].'>'.$row["status_desc"].'</option>';
                    }
}
                    catch(PDOException $e) {
                    printf('Erreur MySQL %d : %s', $e->getCode(), $e->errorInfo[2]);
                    exit;

}
?>
                    </select>

我们将表格中的所有选项都列出到下拉列表中

AJAX

$(document).on('click', '.update', function(){
        var user_id = $(this).attr("id");   
        $.ajax({
            url:"partials/test/fetch_single.php",
            method:"POST",
            data:{user_id:user_id},
            dataType:"json",
            success:function(data)
            {
                $('#userModal').modal('show');
                $('#comp_name').val(data.comp_name);
                $('#comp_parent').val(data.comp_parent);
                $('#status').val(data.select_status);

从 PHP 页面获取正确的值并发送到下拉列表，以便在打开表单时选择该值（问题在这里）

        $('.modal-title').text("Modifier un fichier client");
        $('#user_id').val(user_id);
        $('#user_uploaded_image').html(data.user_image);
        $('#action').val("Edit");
        $('#operation').val("Edit");

    }

})

});

PHP

if(isset($_POST["user_id"]))
{
    $output = array();
    $statement = $connection->prepare(
        "SELECT * 
FROM info_marques AS m 
LEFT JOIN info_status AS s 
ON s.status_id = m.comp_status 
WHERE m.id = '".$_POST["user_id"]."' 
LIMIT 1"
    );
    $statement->execute();
    $result = $statement->fetchAll();
    foreach($result as $row)
    {
        $output["comp_name"] = $row["comp_name"];
        $output["comp_parent"] = $row["comp_parent"];
        $output["status"] = $row["status_id"];

我们返回匹配值

    }

    echo json_encode($output);
}

【讨论】：