Question

我的脚本中有一个HTML属性：

<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>

当我选择第一个项目并将其发布到数据库时，我的脚本会将错误的数据发送到数据库。在我的数据库中，我得到value而不是文本。

选择第一个<option>我要发布Volvo XC90而不是s。我该如何解决这个问题？

我使用的Ajax脚本是：

<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 />\n";
    }
?>

更新1：

这样的事情对我的情况来说是理想的：

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>

功能：

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

Answer 1

使用html作为

<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>

并且你的js功能几乎没有变化

function getPrice(selectedItem) {

而不是

function getPrice() {

您已在此处发送onChange="getPrice(this.value)"所选值，只需抓住它即可。

因此无需再次编码，删除此行

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

在onchange中发送值时，还添加了带空白值的新选项，对第一次加载没有任何影响，将在第一列中选择。

我建议首先检查selectedItem是否为空，然后选择ajax。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

一堆东西：

1.用.val()替换.text()。
2.使用name选择器（因为没有id = cars的此类元素）

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

Answer 3

修改

<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>

发送文字而不是值

3 个答案: