通过单击或下拉按钮更改MySQL查询

Question

I have a dropdown list being populated by the code below. I want to be able to change the type = x from a user input button(s) to predetermined options. I don't know if this is possible, especially without a page refresh as the drop-down is already populated from the initial query.

I need a dynamic query based on user selected without page refresh. Maybe I need to look at another language, such as Angular.

<?php
echo "<b>Start:<b/>";
echo "<select id='start' class=''>";

$list_query = mysqli_query($server, "SELECT `id`, `street`, `description`, `lat`, `lng`, `note`, `type` FROM `markers` WHERE `type` = 'red' ORDER BY `street`");
while($run_list = mysqli_fetch_array($list_query)){
    $u_id = $run_list['id'];
    $u_street = $run_list['street']; 
    $u_desc = $run_list['description'];  
    $u_note = $run_list['note'];  
    $u_type = $run_list['type'];  
    $u_lat = $run_list['lat'];   
    $u_lng = $run_list['lng'];  

    echo "<option value='$u_lat,$u_lng'>$u_street</option>";
}

echo "</select>";
?>

Update

The following returns "red" in the Div with ID of "callback". Instead of this how do I get this to update the query string?

Example Button:

<button id="b1" value="red" onclick="submit_1()">button 1</button>

Ajax:

function submit_1() {
var b1 = document.getElementById("b1").value;
console.log(b1);

var dataString = 'b1=' + b1;

$.ajax({
    type: "POST",
    url: "php/getdata.php",
    data: dataString,
    cache: false,
    success: function(data) {
        $("#callback").html(data);
    }
});
}

Simple getdat.php:

<?php
$b1 = $_POST['b1'];

if ($b1 == "red") {
    echo $b1;
} else {
    echo 'Not '. $b1;
}
?>

Answer 1

Use AJAX. It's entirely possible with PHP and javascript. Basically, you can send off the choice with AJAX (onChange), use the "GET" method, and on success you return the HTML you want to replace (or the corresponding data, then change your HTML according to that).

EDIT Here is an example:

Basically you do some action and then call code like this:

$.ajax({
        url: <?php echo $your_action_url/user_choice;?>,
        type: 'GET',
        success: function(data) {
          $("#dropdown").replaceWith(data);
        }
      });

where the "data" is the dropdown information stored in a view page (I am using MVC in this particular example). Basically I am replacing the existing dropdown with a dropdown containing the right information. You would have the php function return the html that you want to replace the dropdown with.

Answer 2

使用Ajax在服务器的请求查询字符串中添加类型。

$list_query = mysqli_query($server, "SELECT `id`, `street`,`description`, `lat`, `lng`, `note`, `type` FROM `markers` WHERE `type` =  $_GET['type'] ORDER BY `street`");

Answer 3

try to learn ajax angular.js this library very simple use

http://phpenthusiast.com/blog/ajax-with-angular-and-php