使用jquery / php從dropdownlist獲取即時結果

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());
});