javascript - Get instant results from dropdownlist with jquery/php -

i want dropdown list automatically collect right results database without refreshing page.

i wrote code jquery somehow calls front-end twice instead of calling results of select statement.

here's javasacript code:

$(document).ready(function() {     function ajaxloaded(response) {         $('#performanceresults').html(response);     }     function dorequest() {         $.ajax({             url: "results.php",             type: 'post',             success: ajaxloaded         });     }     $('#performance').change(dorequest); }); 

this method contains form:

public function selectperformanceindicator() {         $this->getresults ();          $str = '<form >';         $str .= 'select 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;     } 

and method should create table depending on value select in front-end.

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 result_bidder tagload = ( select max(tagload) result_bidder) order cost_auction asc limit 1';             }             if ($intcase == 2) {                 $strsql = 'select bidder_id, won, lost, fillrate, costs, cost_auction result_bidder tagload = ( select max( tagload ) result_bidder ) order 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>";             }         }     } 

what missing?

edit clarify current results:

front-end without selecting value in drop-down:

image  dropdownlist  results of simulation 

front-end selecting value in drop-down:

image  dropdownlist  *image  *dropdownlist  *results of simulation 

this jquery calls front-end twice

since you're using jquery, should use jquery plugin called chosen, this. http://harvesthq.github.io/chosen/