如何将数据库中的数据显示到选项标签 html 中？答案

【问题标题】：how to display data from database into an option tag html?如何将数据库中的数据显示到选项标签 html 中？
【发布时间】：2017-07-04 07:36:09
【问题描述】：

任何人都可以帮助我吗？我想将我的数据库数据显示到选项标签中，但它没有显示任何内容。我已尝试为此编写代码，但该代码无法将我的数据显示到 html 选项标签中。有人请帮我解决我的问题。

这是我自己编写的代码

// JavaScript Document
// for make the option tag
$(function() {

$('#chkveg').multiselect({

includeSelectAllOption: true

});
});

// for call the data from my database
$(document).on('click','#nama_check',function(e){
    $.ajax({
        type:"POST",
        url:"../php/absen/absen_karyawan_autocomplete.php",
        success: function(data){
            var list = JSON.parse(data);
            for(var i=0; i < list.length; i++){
                $('#chkveg').val((list[i]['bagian']));


            }
            return false;
        }
    });
});

<script src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>


<form id="form1" method="post">

        <div style="padding:20px">

        <select id="chkveg" multiple="multiple">
        </select>

        </div>

        </form>

【问题讨论】：

标签： jquery html tags option

【解决方案1】：

这里有两个问题。首先要将值添加到select，您需要将新的option 元素附加到它，而不是重复设置val()。其次，您应该在添加选项后致电multiselect()。

还请注意，您可以将所有代码放在一个 document.ready 处理程序中。试试这个：

$(function() {    
  $(document).on('click','#nama_check',function(e){
    $.ajax({
      type: "POST",
      url: "../php/absen/absen_karyawan_autocomplete.php",
      dataType: 'json',
      success: function(data) { 
        var html = '';
        for(var i = 0; i < data.length; i++) {
          html += '<option>' + data[i]['bagian'] + '</option>';
        }
        $('#chkveg').html(html).multiselect({
          includeSelectAllOption: true
        });
      }
    });
  });
});

【讨论】：

仍然不工作.. at `' + list[i]['bagian'] + '
对不起 - 我的错误。 list[i] 应该是 data[i]。我为你更新了答案

【解决方案2】：

使用 .append()。尝试查看此文档：http://api.jquery.com/append/

dataType: 'json',
success: function(data){
        var list = JSON.parse(data);
        for(var i=0; i < list.length; i++){
            $('#chkveg').append($('<option>'+ list[i]['bagian']  +'</option>'));


        }
        return false;
    }

【讨论】：

仍然不工作.. at `' + list[i]['bagian'] + '