du77887
2016-08-16 07:44
浏览 93
已采纳

如何使用ajax调用从数据库中列出bootstrap下拉项值?

I am having a Bootstrap dropdown in my HTML which when clicked should list values from postgres database through AJAX request

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Region/Country
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a href="#"></a>
    </li>
  </ul>
</div>

This is my PHP service code which gets called by AJAX when the dropdown is clicked:

$result = pg_query($dbh, "SELECT country from countries");

if (!$result) {
  echo "An error occurred.
";
  exit;
}
$features = array();

while ($row = pg_fetch_array($result)) {
  $features[] = array("country" => array($row[0]));
}

$result_feature = $features;

echo json_encode($result_feature);

I had tried something like below

$(".dropdown-toggle").dropdown({
                source: function (request, response) {
                     $.ajax({
                         url: 'KFRI_Service.php',
                         dataType: 'json',//since you wait for json
                         data: {
                            'service': 'dropdown'
                        },
                         success: function(json){
                        //now when you received json, render options
                            $.each(json, function(i, option){
                                var rendered_option = '<li><a href="#">'+ option.country +'</a></li>';
                                $(rendered_option).appendTo('.dropdown-menu');
                            })
                        }
                    })

                }
            })

current dropdown

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题