通过ajax调用基于选项更改值

Question

当用户选择它将使用pid从数据库中获取价格的size时，我尝试使用ajax更新Price 。

谢谢

我的尺码表看起来像这样

 pid    psize  pprice  ssize   sprice 
  1       12    25      12      30
  2       14    30      14      40
  3       16    35      16       45
  4       18    45  

形成

<form id="add" name="checkout" method="Post" action="checkout.php">
  <table>
    <tr>
      <td width="160">Price:</td>
    <td>  </td> <!-- the price goes here and will change user 
       select from the option by default it should be what pid 1 psize is -->

</tr> 

下面是我如何设置psize的选项

<tr>
  <td width="160">sizes*:</td>
  <td>
<select name="length"  id="length" class="small">
<?php
dbconnect();
$stmt = $conn->prepare("SELECT pid,psize FROM size");
$stmt->execute();
$i = 0;
foreach( $stmt->fetchAll(PDO::FETCH_ASSOC) as $row )
{
    if ($i == 0)
    {
        echo '<option',fillSelect('psize',$row['pid'],'',true),' value="'.$row['pid'].'">'.$row['psize'].'</option>';
    }
    else
    {
        echo '<option',fillSelect('psize',$row['pid']),' value="'.$row['pid'].'">'.$row['psize'].'</option>';
    }
    $i++;
}
?>
</select>

  </table> 
<input type="hidden" name="pid" id="pid" value="<?php echo $pid; ?>" />
<input type="Submit" name="button" id="button" value="Add"/>
    </form> 

Answer 1

您可以使用jquery .change() 。

 $('#length').change(function(){
    $('#loader').show();
    // link to findprice.php
    var findprice = "link/to/your/findprice.php";
    $.post(findprice, {
    length: $('#length').val(),
    }, function(response){
    $('#price').html(response);
    });
    return false;
    });

然后将id添加到Price

<td id="price" width="160">Price:</td>