javascript - 如何在 bootstrap 多选中获取 MySQL 数据?

标签 javascript php jquery mysql ajax

我为 MySQL 数据库创建了一个管理面板,当我单击编辑按钮时,我想打印 Bootstrap 多选中的所有数据。如果我没有使用 Bootstrap 多重选择,只使用普通的多重选择,它就可以工作。我怎样才能做到这一点?

这就是它的样子(在按钮中,它显示当前数据,但是当我打开时,它没有显示在选择菜单中):

enter image description here

index.php

<select name="classification[]" id="classification" multiple="multiple">
   <?php 
      while($row = $classificationResult -> fetch_array()) {
   ?>
   <option value="<?php echo $row['classification_id'];?>"><?php echo $row['name'];?></option>
   <?php
      }
   ?>
</select>

<script>
   // If I didn't add the multi select jquery, it's working
   $('#classification').multiselect({
        nonSelectedText: 'Select Framework',
        maxHeight : 400,
        includeSelectAllOption : false,
        enableFiltering : false,
        buttonWidth : '100%',
        dropRight : true
    });

        $(document).on('click', '.edit_data', function(){
            $("#classification option").prop("selected", false);
            var data_id = $(this).attr("id");  
            $.ajax({  
                url:"fetchRole.php",  
                method:"POST",  
                data:{'data_id':data_id},  
                dataType:"json",  
                success:function(data){  
                    $.each(data.classifications, function(i, e) {
                        $("#classification option[value='" + e + "']").prop("selected", true);
                    });
                    $('#data_id').val(data.id);  
                    $('#insert').val("Edit");  
                    $('#add_data_Modal').modal('show');  
                }  
            });  
        });  
</script>

fetchRole.php

$query2 = $conn -> prepare("SELECT classification.classification_id AS class_id
            FROM classification
            LEFT JOIN role_classification ON classification.classification_id = role_classification.classification_id
            WHERE role_classification.role_id = ?");
        $query2 -> bind_param('i', $role['id']);
        $query2 -> execute();
        $result2 = $query2 -> get_result();
        $query2 -> close();

        while ($classification = $result2 -> fetch_assoc()) {
            $classificationIdList[] = $classification["class_id"];
        }



        $return = array_merge($role, ["classifications" => $classificationIdList]);

    echo json_encode($return);

最佳答案

使用.prop("selected", true)设置新的选定选项后,您需要刷新多选。 .

$.each(data.classifications, function(i, e) {
    $("#classification option[value='" + e + "']").prop("selected", true);
});

$('#classification').multiselect('refresh');

refresh的描述方法:

This method is used to refresh the checked checkboxes based on the currently selected options within the select.

您可以查看可用方法的完整列表HERE .

关于javascript - 如何在 bootstrap 多选中获取 MySQL 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51328577/

相关文章:

javascript - 在javascript中,如何在不覆盖以前的粗体字符串的情况下用粗体文本替换多个字符串?

php - 在存储在数据库中的序列化值中搜索

php - laravel访问原生php脚本

android - Jsoup 从 CSS 中选择元素

jquery - 排序或分页时显示 Ajax 加载指示器 ASP.net MVC Webgrid

javascript - props.clickHandler 不是一个函数(ReactJS)

javascript - 用于在单词级别检查电话号码的表达式正则

javascript - 如何将字符串传递给 Bootstrap 模式?

javascript - 如何裁剪超过元素长度的字符串?

php - 如何根据不同表中的日期进行选择