发送文本而不是值

I have a HTML attribute in my script:

<select name="cars" onChange="getPrice(this.value)">
    <option value="1">Volvo XC90</option>
    <option value="2">Saab 95</option>
    <option value="3">Mercedes SLK</option>
    <option value="4">Audi TT</option>
</select>

When I select the first item and post this to the database my script sends the wrong data to the database. In my database I get the value instead of the text.

By selecting the first <option> I want to post Volvo XC90 instead of s. How can I solve this?

The Ajax script I am using is:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    function getPrice() {

        // getting the selected id in combo
        var selectedItem = jQuery('#cars option:selected').val();

        // Do an Ajax request to retrieve the product price
    jQuery.ajax({
            url: 'get.php',
            method: 'POST',
            data: {'cars': selectedItem }, 
            success: function(response){
            // and put the price in text field
                jQuery('#cars').val(response);
                },
            error: function (request, status, error) {
                alert(request.responseText);
                },
        }); 
    }
</script>

send.php

<?php
$correct = true;
$product1 = $_POST['product1'] ;

if($correct){
    $db = new PDO('mysql:host=localhost;dbname=database', 'root', '');
    $query = "INSERT INTO forms(product1) VALUES (?)";
    $stmt = $db->prepare($query);
    $stmt->execute(array($product1));

            header("Location: ./print.php");  
    }
    else
    {
        echo "<br /><br />Error.<br />
";
    }
?> 

Update 1:

Something like this is ideal for my situation:

html:

<select name="cars" onChange="getPrice(this.value)">
    <option id="1" value="Volvo XC90">Volvo XC90</option>
    <option id="2" value="Saab 95">Saab 95</option>
    <option id="3" value="Mercedes SLK">Mercedes SLK</option>
    <option id="4" value="Audi TT">Audi TT</option>
</select>

function:

$('[id=cars]').change(function()
{
  alert($('[id=cars] option:selected').text());
});

Bunch of things :

1.Replace .val() with .text().
2.Use name selector ( since there is no such element with id = cars )

var selectedItem = jQuery('[name=cars] option:selected').text();

EDIT:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getPrice()
{
    var selectedItem = $( "#cars" ).val();
    alert(selectedItem);
}
</script>

<select name="cars" onChange="getPrice(this.value)" id="cars">
    <option id="1" value="Volvo XC90">Volvo XC90</option>
    <option id="2" value="Saab 95">Saab 95</option>
    <option id="3" value="Mercedes SLK">Mercedes SLK</option>
    <option id="4" value="Audi TT">Audi TT</option>
</select>

Use html as

<select name="cars" onChange="getPrice(this.value)">
<option value="">Select</option>
<option value="Volvo XC90">Volvo XC90</option>
<option value="Saab 95">Saab 95</option>
<option value="Mercedes SLK">Mercedes SLK</option>
<option value="Audi TT">Audi TT</option>
</select>

and little change in your js function as

function getPrice(selectedItem) {

Instead of

function getPrice() {

You are already sending onChange="getPrice(this.value)" selected value here, just needed to catch it.

so there is no need to code to get again, remove this line

var selectedItem = jQuery('#cars option:selected').val();

Also added new option with blank value as you are sending value in onchange, there will be no effect on first load and it will be selected first column.

I suggest first check not empty for selectedItem then go for ajax.

function getPrice(selectedItem) {
  alert(selectedItem);
}

<select name="cars" onChange="getPrice(this.value)">
  <option value="">Select</option>
  <option value="Volvo XC90">Volvo XC90</option>
  <option value="Saab 95">Saab 95</option>
  <option value="Mercedes SLK">Mercedes SLK</option>
  <option value="Audi TT">Audi TT</option>
</select>

</div>