如何获取 select 选项上的多个值并使用 ajax 以输入类型显示？

Question

I'm trying to fetch mutiple values from database using ajax php. I've a select option(value is fetching from database), and if i select any option then i want to display the related data which is matching with the id of the the current option.but currently i'm able to fetch only one data column from databse. I'm writing my current code please have a look at it and let me know how can i modify it.

My select option:-

<select data-placeholder="Choose a Vehicle..." class="chosen-select form-control" tabindex="-1" name='vno' onChange="getCity(this.value);" id="vno"  required='true' >
    <option value="">Select</option>
    <?php
        foreach($results as $vd) { ?>

    <option value='<?php echo $vd['id'];?>'><?php echo $vd['vno'];?></option>";

    <?php } ?>
</select>

and the js file

// Fetch city from Database
function getCity(val) {
    $.ajax({
        type: "POST",
        url: "retrive_data.php",
        data:'id='+val,
        success: function(data){
            $("#rate").html(data);
        }
    });
}

retrive_data.php

<?php
require_once ("dbController.php");
$db_handle = new DBController();
if (! empty($_POST["id"])) {
    $query = "SELECT * FROM tbl_vehicle WHERE id = '" . $_POST["id"] . "' ";
    $results = $db_handle->runQuery($query);
    ?>

<?php
    foreach ($results as $city) {
        ?>
<option value="<?php echo $city["rate"]; ?>"><?php echo $city["rate"]; ?></option>
<?php
    }
}
?>

Answer 1

Change your js code as below

  // Fetch city from Database
    function getCity(val) {
        $.ajax({
            type: "POST",
            url: "retrive_data.php?id=" + val,
            success: function(data){
                $("#rate").html(data);
            }
        });
    }

Answer 2

I'm making some assumptions about the desired result, and I'm not sure what the connection is between vehicles and city rates... but there are multiple issues here. Let's work through them:

<select data-placeholder="Choose a Vehicle..." class="chosen-select form-control" tabindex="-1" name='vno' id="vno"  required='true' >
    <option value="">Select</option>
    <?php foreach($results as $vd): ?>
    <option value="<?= $vd['id']?>" ><?= $vd['vno'] ?></option>";
    <?php endforeach; ?>
</select>

<!-- add a landing spot for the data coming in -->
<select id="rate"></select>

Nothing major here, just took out the onChange (typical practice is to have a listener in the JavaScript. Separation of concerns)

In your JavaScript, I don't think you were successfully passing the id. It should be a JavaScript object. Also, send data to a function that knows how to put the data in your form:

// Fetch city from Database
function getCity(val) {
    $.ajax({
        type: "POST",
        url: "retrive_data.php",
        data:{id: val},
        success: function(data){
            showRate(data);
        }
    });
}

Monitor the select for a change. (JavaScript should be inside document ready block)

$('#vno').on('change', function (){
    getCity($(this).val());
});

Function to display the results of your ajax call:

showRate(data) {

    // this lets you see the data that was returned 
    console.log(data);

    var rate = $('#rate');

    // clear current content 
    rate.html('');

    // create options, assuming this is a select 
    $.each(data, function() {
        rate.append($("<option />").val(this.rate).text(this.rate));
    });
}

retrieve.php

Need to use prepared statements, and sending data as json instead of html is recommended

<?php

// sending json (data), not html (presentation)
header('Content-Type: application/json');

require_once ("dbController.php");
$db_handle = new DBController();
if (! empty($_POST["id"])) {

    // substituting variables in a query is a big no-no
    // $query = "SELECT * FROM tbl_vehicle WHERE id = '" . $_POST["id"] . "' ";

    // must use placeholders / prepared statement 
    $query = "SELECT * FROM tbl_vehicle WHERE id = ?'";

    // check your database object for how to do prepared statements and row fetching. If it doesn’t do prepared statements, dump it!
    $stmt = $db_handle->prepare ($query);
    $stmt->execute($_POST["id"]);

    $out = array();
    while($row = $stmt->fetch() ) {
        $rate = $row['rate'];

        $out[] = array(
            'rate'=>$rate
        );
    }

    die(json_encode($out));
}

Caveat: all code is off the top of my head, and typed on a phone. Syntax errors are likely. This is intended to show concepts and ideas for further research