javascript - 使用 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/