Question

我有一个表单，其中两个字段是产品名称和产品价格。产品名称是一个下拉列表，它与db中的产品表链接。所有产品从db中获取。我希望如果我从drop中选择一个产品然后从db表中相应的价格提取将自动显示在文本字段中。我的价格文本字段代码

Answer 1

这是一个简单的自动完成功能。即使你能够在网络中找到它。尝试根据需要更改此代码

的index.php

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#skills" ).autocomplete({
      source: 'search.php'
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="skills">Skills: </label>
  <input id="skills">
</div>
</body>
</html>

的search.php

    <?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'codexworld';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC");
while ($row = $query->fetch_assoc()) {
    $data[] = $row['skill'];
}
//return json data
echo json_encode($data);
?>

参考

http://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/

Answer 2

这对您有帮助

您也可以在select中使用 data-xxx 而不是 value 属性。如果您使用data-xxx属性，请在jquery中进行必要的更改。

<select id="product-name" >
  <option value=""> Select a product</option>
  <?php
  // $products is from your product table a 2D associative array
  // fetch formate like
  // $procucts = array(
  //                  array('name' => <product1-name>,'price' => <product1-price>),
  //                  array('name' => <product2-name>,'price' => <product2-price>),
  //                  ...............
  //                  ...............
  //                  );
  foreach($products as $product){
    ?>
    <option value="<?php echo $product['price']; ?>"  ><?php echo $product['name']; ?></option>
    <?php
  }
  ?>
</select>

<input type="text" id="product-price" name="product-price" value="" />

<script type="text/javascript">
  $(document).ready(function(){
    $("#product-name").change(function(){
      var price = $(this).val();
      $("#product-price").val(price);
    });
  });
</script>

Answer 3

代码可能对您有所帮助。

Dynamic Select Option Menu Using Ajax And PHP

Answer 4

<select id="product-name" >
  <option value=""> Select a product</option>
  <?php
  // $products is from your product table a 2D associative array
  // fetch formate like
  // $procucts = array(
  //                  array('name' => <product1-name>,'price' => <product1-price>),
  //                  array('name' => <product2-name>,'price' => <product2-price>),
  //                  ...............
  //                  ...............
  //                  );
  foreach($products as $product){
    ?>
    <option data-price="<?php echo $product['price']; ?>" value="<?php echo $product['product_id']; ?>"  ><?php echo $product['name']; ?></option>
    <?php
  }
  ?>
</select>

<input type="text" id="product-price" name="product-price" value="" />

<script type="text/javascript">
  $(document).ready(function(){
    $("#product-name").change(function(){
      var price = $("option:selected", this).attr('data-price');
      $("#product-price").val(price);
    });
  });
</script>

使用php和java脚本根据下拉选择的结果填充文本字段？

4 个答案: