Javascript 脚本未将信息从下拉列表发布到文本框

我试图从下拉列表中获取数据并将其发布到文本框中。但是由于某种原因，我没有得到任何响应，也没有收到需要显示在文本框中的

错误
消息

首先，这是我的下拉列表：

<?php
 $servername = "localhost";
 $username = "root";
 $password = "";
 $dbname = "db";

 // Create connection
 $conn = new mysqli($servername, $username, $password, $dbname);
 // Check connection
 if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
  } 

 $sql = "SELECT * FROM products";
 $result = $conn->query($sql);

 if ($result->num_rows > 0) {
  echo "<select class='form-control' id='product1' name='product1' onChange='getProduct1(this.value)' style='width: 100%;'>";
  echo "<option selected disabled hidden value=''></option>";
  // output data of each row
  while($row = $result->fetch_assoc()) {
   echo "<option value='" . $row["id"]. "'>" . $row["article_id"]. " | " . $row["name"]. "</option>";
   }                   
  echo "</select>";
  } else {
  echo "0 results";
  }
 $conn->close();
?>  

我用来粘贴名称的jquery脚本如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
 function getProduct1(selectedItem) { // Do an Ajax request to retrieve the information 

 console.log("getProduct1 before ajax", jQuery('#product1').val());
 jQuery.ajax({ 
  url: 'get.php', 
  method: 'POST', 
  data: {'product1' : jQuery('#product1').val()},
  success: function(response){ 
   // and put the price in text field 
   console.log("getProduct1 after ajax", jQuery('#product1').val());
   jQuery('#product11').val(response);

   }, 
  error: function (request, status, error) { 
   alert(request.responseText); 
   }, 
  }); 
 } 
</script>


函数getProduct1（selectedItem）{//执行Ajax请求以检索信息
log（“ajax之前的getProduct1”，jQuery（'#product1'）.val（））；
ajax（{
url:'get.php'，
方法：“POST”，
数据：{'product1'：jQuery（'#product1'）.val（），
成功：功能（响应）{
//并在文本字段中输入价格
log（“ajax之后的getProduct1”，jQuery（'#product1'）.val（））；
jQuery（'#product11'）.val（响应）；
}, 
错误：函数（请求、状态、错误）{
警报（request.responseText）；
}, 
}); 
} 

该脚本使用以下PHP脚本连接数据库并检索相关信息：

<?php    
 $servername = "localhost";
 $username = "root";
 $password = "";
 $dbname = "db";

 // Create connection
 $conn = new mysqli($servername, $username, $password, $dbname) ;
 // Check connection
 if ($conn->connect_error) {
  die('Connection failed: ' . $conn->connect_error) ;
  }else {
  $product1 = isset($_POST['produc1t'])?$_POST['product1']:'';
  $product11 = isset($_POST['product11'])?$_POST['product11']:'';

  $query = 'SELECT * FROM products WHERE id="' . mysqli_real_escape_string($conn, $product1) . '"';    
  $res = mysqli_query($conn, $query) ;
  if (mysqli_num_rows($res) > 0) {
   $result = mysqli_fetch_assoc($res) ;
   echo $result['product11'];   
   }else{
   $result = mysqli_fetch_assoc($res) ;
   echo "Error";   
  }    
 } 
?>



当我通过在下拉列表中选择一个选项来运行脚本时，没有发生任何事情。有人知道我的脚本出了什么问题吗？
我不确定您是否应该再次查询数据库以获取已检索到的值。像这样的方法应该会奏效：

jQuery( document ).ready(function() {
    jQuery( "#product1" ).change(function(){
        var name = jQuery( "#product1 option:selected" ).text().split('|')[1];
        jQuery("#product11").val(name);
    });
 });

您不需要HTML中的javascript/jQuery命令
现在脚本正在发布
错误
您的AJAX请求发送
'product1'
，但是您正在检查php代码中的
id
，我将其更改为
$product1=isset（$\u POST['product1']）？$\u POST['product1']：“”但它仍然不工作。我会在文本框中看到
错误
，你改变了我的意思。还有一个问题，为什么要查询已有的值？@RST抱歉，我以为你是这个意思@John I指的是，在您的问题中，您使用id
product1
获取输入值，接收下拉列表值的输入是id为
product11
的输入，我需要把它放在哪里？@John用它替换
getProduct1
的内容。我将它粘贴到getProduct1和文档加载函数中，但它不起作用。我已经调整了代码。您应该将其粘贴在第二对
脚本
标记之间，替换其中的所有内容。
jQuery( document ).ready(function() {
    jQuery( "#product1" ).change(function(){
        var name = jQuery( "#product1 option:selected" ).text().split('|')[1];
        jQuery("#product11").val(name);
    });
 });