Question

我有一个应用程序，它通过使用Bootstrap 3 Group Button和Bootstrap选择库从MySQL数据库获取一些数据：

<div class="panel panel-default">
  <div class="panel-heading">4 - Select Species <button type="button" class="btn btn-default btn-xs pull-right" id="specicPop">?</button></div>
  <div class="panel-body">
  <div class="btn-group"  id="speciesSelect">
      <button id="allspecies" type="button" class="btn btn-default btn-sm">All Species</button>
      <button id="aquatic" type="button" class="btn btn-default btn-sm">Aquatic</button>
      <button id="terrestria" type="button" class="btn btn-default btn-sm">Terrestrial</button>
  </div>
    <select class="selectpicker" id="selectPicker" class="form-control" data-container="body" data-live-search="true">
    <option value="0">Select From The List</option>
 </div>
</div>

，ajax如下：

$('.btn-group .btn').click(function(){
     $( ".selectpicker" ).selectpicker("refresh");
    $.post(
        'con/animalList.php',
        { selType : this.id },
        function(data)
        {
           $('#selectPicker').html(data);
        }
    );
});

PHP部分就像

if ($result->num_rows > 0) 
    {
    $resultStr.=  '<option value="0">Select From The List</option><option';
        while($row = $result->fetch_assoc())
        {
            $resultStr.=  '<option value="'.$row['id'].'">'.$row['fName'].'</option>';  
        }
    }
    else
    {
        $resultStr = 'Nothing found';
    }

现在的问题是，我必须双击或单击两次以使用数据库中的选项加载select元素。请注意，PHP部分工作正常，我收到正确的数据，但我无法弄清楚为什么第一次点击不起作用！

你能告诉我如何解决这个问题吗？感谢

Answer 1

使用当前浏览器的调试工具（通常在Windows上通过F12显示）。

然后将debugger;添加到您的代码中以查看代码何时执行。

$('.btn-group .btn').click(function(){
    // this will pause your execution in your browser
    // and shows you the line
    debugger;
});

这样，您将看到第一次点击是否真的不会触发。如果不是，您的代码中可能会出现错误。

您是否有其他JS代码可能会破坏您的代码？

必须双击从MySQL数据库引导程序获取数据3选择库

1 个答案: