javascript - 无法根据从 2 个下拉列表中选择的值获取值

Question

我有 2 个下拉列表，其中第一个下拉列表是使用 AJAX 从 MySQL 获取数据，下面是脚本:

$(document).ready(function() {
     $('#sale_type').change(function() {
    var formData = { 'selectedValue' : $( "#sale_type option:selected" ).val() };
    console.log(formData);
    $.ajax({
       type: 'POST',  
       url: 'getTypeDetails.php',
       data: formData,
       success: function(data){              
      var obj = jQuery.parseJSON(data);      
      var secondDropdown = $("#sale_details");
      secondDropdown.html('');
      var init = 'إختر';
      secondDropdown.append("<option>" + init + "</option>");
      for (var prop in obj) {

         secondDropdown.append("<option>" + obj[prop] + "</option>");
        } 

       },
       error: function(errorThrown){
      alert(errorThrown);
       }

       });

     return false;
     });
   });

这是 PHP 代码(getType...):

<?php
    require_once('../include/global.php');

    $init_data = $_POST['selectedValue'];
    // Connect to database
    // Use the data to get the new information
    $query = "SELECT * FROM purchases WHERE sale_type = :data";
    // MySQL
    $results = $conn->prepare($query);
    $results->bindValue(":data", $init_data);
    $exec = $results->execute();
    $res = $results->fetchAll();

    $data = array();
    $i = 0;
    foreach($res as $row){
         $data[$i] = $row['sale_details'];
         $i++;

    }
    echo json_encode($data);
?>

现在，数据使用第一个下拉列表中的选定值正常显示在第二个下拉列表中，以下是脚本:

$(document).ready(function() {
     $('#sale_type_2').change(function() {
    var formData = { 'selectedValue2' : $( "#sale_type_2 option:selected" ).val() };
    console.log(formData);
    $.ajax({
       type: 'POST',  
       url: 'getTypeDetails_2.php',
       data: formData,
       success: function(data){              
      var obj = jQuery.parseJSON(data);      
      var secondDropdown = $("#sale_details_2");
      secondDropdown.html('');
      var init = 'إختر';
      secondDropdown.append("<option>" + init + "</option>");
      for (var prop in obj) {

         secondDropdown.append("<option>" + obj[prop] + "</option>");
        } 

       },
       error: function(errorThrown){
      alert(errorThrown);
       }

       });

     return false;
     });
   });

现在，我想从这 2 个下拉列表中获取 2 个选定值并将值显示到文本框中，因此我尝试了以下操作:

$(document).ready(function() {
     $('#sale_details_2').change(function() {
    var formData = { 'selectedValue' : $( "#sale_type_2 option:selected" ).val(),
    'selectedValue2' : $( "#sale_details_2 option:selected" ).val() };
    console.log(formData);
    $.ajax({
       type: 'POST',  
       url: 'getTypeDetails_3.php',
       data: formData,
       success: function(data){              
      var obj = jQuery.parseJSON(data);      
      var secondDropdown = $("#price_2");
      secondDropdown.html('');
      for (var prop in obj) {

         secondDropdown.text(obj[prop]);
        } 

       },
       error: function(errorThrown){
      alert(errorThrown);
       }

       });

     return false;
     });
   });

这是 php 代码:

<?php
    require_once('../include/global.php');

    $init_data = $_POST['selectedValue2'];
    $init_data2 = $_POST['selectedValue3'];
    // Connect to database
    // Use the data to get the new information
    $query = "SELECT * FROM purchases WHERE sale_type = :data AND sale_details = :data2";
    // MySQL
    $results = $conn->prepare($query);
    $results->bindValue(":data", $init_data);
    $results->bindValue(":data2", $init_data2);
    $exec = $results->execute();
    $res = $results->fetchAll();

    $data = array();
    $i = 0;
    foreach($res as $row){
         $data[$i] = $row['price'];
         $i++;

    }
    echo json_encode($data);
?>

但它没有得到任何结果，并且出现以下控制台错误:

Object {selectedValue: "BMW", selectedValue2: "despirator"}

VM227:1 Uncaught SyntaxError: Unexpected token <

感谢任何帮助

编辑 将一些行更正后:

var formData = { 'selectedValue' : $( "#sale_type_2 option:selected" ).val(),
    'selectedValue2' : $( "#sale_details_2 option:selected" ).val() };

还有:

   $init_data = $_POST['selectedValue'];
    $init_data2 = $_POST['selectedValue2'];

我遇到了同样的错误，这是它的图像:

Answer 1

在 formData 中，您发送值 selectedValue & selectedValue2但在 php 中你尝试获取 selectedValue2 & selectedValue3

文档.ready 3

var formData = { 'selectedValue' : $( "#sale_type_2 option:selected" ).val(),
'selectedValue2' : $( "#sale_details_2 option:selected" ).val() };

PHP2

$init_data = $_POST['selectedValue2'];
$init_data2 = $_POST['selectedValue3'];

编辑

OP找到它，而不是secondDropdown.text(obj[prop]);使用secondDropdown.val(obj[prop]);因为他正在访问一个文本框。