從jquery/php下載列表中獲取即時結果

Question

我希望我的下拉列表自動從數據庫中收集正確的結果，而無需刷新頁面。

我用jQuery編寫代碼，但不知何故它調用我的前端兩次而不是調用select語句的結果。

這裏是我的javasacript代碼：

$(document).ready(function() { 
    function ajaxLoaded(response) { 
     $('#performanceResults').html(response); 
    } 
    function doRequest() { 
     $.ajax({ 
      url: "results.php", 
      type: 'POST', 
      success: ajaxLoaded 
     }); 
    } 
    $('#performance').change(doRequest); 
}); 

這是一個包含我的窗體的方法：

public function SelectPerformanceIndicator() { 
     $this->getResults(); 

     $str = '<form >'; 
     $str .= 'Select your performance indicator<br>'; 
     $str .= '<select id = "performance">'; 
     $str .= '<option value = "">Select Performance Indicator</option>'; 
     $str .= '<option value = "1">Cost per auction </option>'; 
     $str .= '<option value = "2">Fillrate </option>'; 
     $str .= '</select>'; 
     $str .= '</form>'; 
     $str .= '<br>'; 
     $str .= '<div id="performanceResults"></div>'; 

     return $str; 
    } 

這是應該根據創建表的方法，我選擇哪個值我前端。

public function getResults() { 
     $intCase = intval ($_POST ['q']); 

     if ($intCase == 1 or $intCase == 2) { 
      if ($intCase == 1) { 
       $strSql = 'select bidder_id, won, lost, fillrate, costs, cost_auction from result_bidder where tagload = (select max(tagload) from result_bidder) order by cost_auction asc limit 1'; 
      } 
      if ($intCase == 2) { 
       $strSql = 'select bidder_id, won, lost, fillrate, costs, cost_auction from result_bidder where tagload = (select max(tagload) from result_bidder) order by fillrate asc limit 1'; 
      } 
      if (! isset ($_POST ['jquery'])) { 
       $arrBestPerformer = $objDatabase->queryresult ($strSql); 
       echo "<table border='1'> 
      <tr> 
      <th>bidder_id</th> 
      <th>won</th> 
      <th>lost</th> 
      <th>fillrate</th> 
      <th>costs</th> 
      <th>cost_auction</th> 
      </tr>"; 

       while ($row = mysqli_fetch_array ($arrBestPerformer)) { 
        echo "<tr>"; 
        echo "<td>" . $row ['bidder_id'] . "</td>"; 
        echo "<td>" . $row ['won'] . "</td>"; 
        echo "<td>" . $row ['lost'] . "</td>"; 
        echo "<td>" . $row ['fillrate'] . "</td>"; 
        echo "<td>" . $row ['costs'] . "</td>"; 
        echo "<td>" . $row ['cost_auction'] . "</td>"; 
        echo "</tr>"; 
       } 
       echo "</table>"; 
      } 
     } 
    } 

我錯過了什麼？

編輯澄清目前的結果：

前端而不選擇在下拉的值：

Image 

Dropdownlist 

Results of a simulation 

前端與在下拉菜單中選擇一個值：

Image 

Dropdownlist 

*Image 

*Dropdownlist 

*Results of a simulation 

這是jquery的調用前端兩次

Answer 1

由於您已經在使用jQuery，因此您應該使用名爲Chosen的jQuery插件，完全是這樣。看http://harvesthq.github.io/chosen/

Answer 2

試試這個：

$(document).ready(function() { 
    function ajaxLoaded(response) { 
     $('#performanceResults').html(response); 
    } 
    function doRequest() { 
     $.ajax({ 
      url: "results.php", 
      type: 'POST', 
      success: ajaxLoaded() 
     }); 
    } 
    $('#performance').change(doRequest()); 
});