Javascript mysql中的ajax表单选项结果为按钮，可以在文本框中设置值_Javascript_Php_Ajax_Twitter Bootstrap 3

Javascript mysql中的ajax表单选项结果为按钮，可以在文本框中设置值

javascript php ajax twitter-bootstrap-3

Javascript mysql中的ajax表单选项结果为按钮，可以在文本框中设置值,javascript,php,ajax,twitter-bootstrap-3,Javascript,Php,Ajax,Twitter Bootstrap 3,我有一个表单，它选择一个选项并从mysql数据库加载数据。这些结果以方框显示。我希望这些框是引导按钮，当点击其中一个时，它会将值添加到文本字段中，如果我选择了另一个，则会发生更改。我试着让一切都不起作用 html/php文件代码为： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

我有一个表单，它选择一个选项并从mysql数据库加载数据。这些结果以方框显示。我希望这些框是引导按钮，当点击其中一个时，它会将值添加到文本字段中，如果我选择了另一个，则会发生更改。我试着让一切都不起作用

html/php文件代码为：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading MySQL Records on Drop Down Selection using PHP jQuery</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
<style type="text/css">
select{

 width:250px;
 padding:5px;
 border-radius:3px;
}
</style>
<script src="jquery-1.11.2.min.js"></script>
<script>/* jquery code will be here */</script>
</head>
<body>

<div class="container">

     <div class="page-header">
        <h3>
        <select id="getProducts">
        <option value="showAll" selected="selected">Show All Products</option>
        <?php
        require_once 'config.php';

        $stmt = $dbcon->prepare('SELECT * FROM categories');
        $stmt->execute();

        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
            ?>
            <option value="<?php echo $cat_id; ?>"><?php echo $cat_name; ?></option>
            <?php
        }
        ?>
        </select>
        </h3>
        </div>
    <blockquote>Load MySQL Records On Drop Down Selection</blockquote>
    <hr />

    <div class="" id="display">
       <!-- Records will be displayed here -->
    </div>



</div>
</body>
</html>


使用PHP jQuery在下拉选择中加载MySQL记录
挑选{
宽度：250px；
填充物：5px；
边界半径：3px；
}
/*jquery代码将在这里*/
展示所有产品
    <script type="text/javascript">
$(document).ready(function()
{  
 // function to get all records from table
 function getAll(){

  $.ajax
  ({
   url: 'getproducts.php',
   data: 'action=showAll',
   cache: false,
   success: function(r)
   {
    $("#display").html(r);
   }
  });   
 }

 getAll();
 // function to get all records from table


 // code to get all records from table via select box
 $("#getProducts").change(function()
 {    
  var id = $(this).find(":selected").val();

  var dataString = 'action='+ id;

  $.ajax
  ({
   url: 'getproducts.php',
   data: dataString,
   cache: false,
   success: function(r)
   {
    $("#display").html(r);
   } 
  });
 })
 // code to get all records from table via select box
});
</script>

    <?php

 include('config.php');

 $action = $_REQUEST['action'];

 if($action=="showAll"){

  $stmt=$dbcon->prepare('SELECT product_id, product_name FROM products ORDER BY product_name');
  $stmt->execute();

 }else{

  $stmt=$dbcon->prepare('SELECT product_id, product_name FROM products WHERE cat_id=:cid ORDER BY product_name');
  $stmt->execute(array(':cid'=>$action));
 }

 ?>
 <div class="row">
 <?php
 if($stmt->rowCount() > 0){

  while($row=$stmt->fetch(PDO::FETCH_ASSOC))
  {
   extract($row);

   ?>
   <div class="col-xs-3">
   <div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;"><?php echo $product_name; ?></div><br />
   </div>
   <?php  
  }

 }else{

  ?>
        <div class="col-xs-3">
   <div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;"><?php echo $product_name; ?></div><br />
  </div>
        <?php  
 }


 ?>
 </div>