如何基于php中的下拉选择动态地在文本字段中获取内容

时间:2015-12-05 06:49:34

标签: php jquery mysql

我在数据库中有两个字段,一个是package_title,另一个是package_cost。我正在使用while循环下拉显示package_title。当客户从下拉列表中选择package_title时,我想在另一个文本字段中显示其成本(package_cost)。请帮帮我。

我的PHP代码:

<div class="form-select-date">
    <div class="form-elements">
        <label>Select Package</label>
        <div class="form-item">
            <select>
                <option value="">Select</option>
                <?php
                $qry = "select * from `hajj_umrah_package`";
                $rec = mysql_query($qry );
                if( mysql_num_rows($rec) > 0)
                {
                    while($res = mysql_fetch_array($rec))
                    {
                        echo "<option value='".$res['id']."'>".$res['package_title']."</option>";
                    }
                } 
                ?> 
            </select>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="form-elements form-adult">
        <label>Price</label>
        <div class="form-item">
            <input type="text" name="cost"  />
        </div>
    </div>
</div>

3 个答案:

答案 0 :(得分:3)

使用jquery ajax可以很简单地执行此操作。首先,您必须获得更改事件的下拉值。然后调用下面给出的ajax。

$('#dropdown_id').change(function(){
var package = $(this).val();
$.ajax({
   type:'POST',
   data:{package:package},
   url:'get_cost.php',
   success:function(data){
       $('#cost').val(data);
   } 

});

});

在您编写上述代码的同一目录中创建一个php文件(get_cost.php)。在get_cost.php中添加以下代码:

<?php 
if (isset($_POST['package'])) {
    $qry = "select * from `hajj_umrah_package` where id=" . $_POST['package'];
    $rec = mysql_query($qry);
    if (mysql_num_rows($rec) > 0) {
        while ($res = mysql_fetch_array($rec)) {
            echo $res['package_cost'];
        }
    }
}
die();
?>

答案 1 :(得分:2)

将您的php查询放在html正文之外,而不是将其放在标题的脚本标记中。

然后在json数组中选择成本和标题。

然后在加载页面时使用jquery动态填充select,并使用jquery监视更改并从select字段中获取密钥,并使用它来填充成本字段和相关的成本密钥。

如果您需要定期更新数据,因为用户可能需要的时间超过页面上所需的时间,您可以添加一个循环来清除价格数据并重新填充而无需用户看到。

这样代码可以更好地扩展,恕我直言。

您可以在此处查看示例:Populate text field based on result of dropdown selection - both with php mysql ajax requests

[编辑]为您编写代码:

<head><script>
var $list = array();

function loadData()
{
  //grab the data in function so it can also be recalled for updates if needed
<?php
$sql = "SELECT * FROM hajj_umrah_package";
$result = mysqli_query($sql);
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
{
  $list[$row['package_name']] = $row['package_price'];
}
echo '  $productVars = '.json_encode($list).';';
?>
}
</script>
</head>
<body>
<select name="packages" id="packages">
  <option data-price="" value='0'>Select...</option>
</select>
<input type="text" name="textfieldid" id="textfieldid" value=""/>
<script>
  $(document).ready(function()
  {

    //first populate the drop down
    $.each($productVars, function(key, value)
    {   
       $('#packages')
         .append($("<option></option>")
         .attr("value",key)
         .data("price",value)
         .text(key)); 
    });

    //now watch for change
    $('select[name="packages"]').change(function()
    {
         $('#textfieldid').val($('select[name="packages"] option:selected').data('price'));
    });

  }
</script>
</body>
</html

答案 2 :(得分:1)

你可以在下拉列表中添加ajax调用并在search_cost php文件中传递包值,然后在search_cost.php文件中找到pacakage,然后在文本框中填充

 $('#dropdown_id').click(function(){
 var package = $('#dropdown_id').val();
    $.ajax({
       type:'POST',
       data:{package:package},
       url:'search_cost.php',
       success:function(data){
           $('#cost').val(data);
      } 

      });

 });

search_cost.php

include("your connection file");

   $package=$_POST['package'];
   $query=("select cost from your_table_name where package_name='$package'");
   $row=mysqli_fetch_array($query);
   echo $row['cost'];