Question

我有以下PHP代码，我打印我的HTML，我有一个变量$ price和另一个$ numofguests

<?php
echo '$' . $price ;

$i = 1;
//This print values of number of guest for example: 1,2,3,4
echo 'Select Number of Guests';
echo '<select name="numberofguests">';
while ($i <= $numofguests):
        echo $i;
    echo '<option value="' .$i. '">' .$i. '</option>'; 
        $i++;
endwhile;
echo '</select>'; 
?>

我如何根据用户选择在运行中打印总价？

示例：假设$ price = $ 5且客人选项的数量为：1,2,3

因此，默认情况下，guest of guest将为1，总价格为$ 5

但如果用户选择客人数量= 2，我希望总价格变为10美元，如果客人数量= 3，我希望总价格变为15美元

非常感谢

Answer 1

试试这个。

 <div id="pricediv"></div>
    <?php
    $numofguests = 5;
    $i = 1;
    echo 'Select Number of Guests'."</br>";
    echo '<select name="numberofguests" onchange="total(this.value)">';
    while ($i <= $numofguests):
            echo $i;
        echo '<option value="' .$i. '">' .$i. '</option>'; 
            $i++;
    endwhile;
    echo '</select>'; 
    ?>

    <script>
    function total(guest){
    var price = guest*5;
    document.getElementById("pricediv").innerHTML="Price for "+guest+" guests is $"+price; 
    }

    </script>

Answer 2

你的php代码是：

# index.php
<?php
$i = 1;
?>
<select id="room-selector" name="numberofguests">
  <?php while ($i <= $numofguests): ?>
    <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
    <?php $i++; ?>
  <?php endwhile; ?>
</select>
<p>No. of guest selected : <span id="guest-count"></span></p>

现在在javascript：

$("#room-selector").change(function() {
  var price = 5; // or var price = <?php echo $price; ?>;
  $('#guest-count').text($(this).val() * price);
});

从更改后的选择下拉列表中取值，并将值放在范围内。

演示：JSBin

Answer 3

因此，您将需要使用Javascript更新客户端中的价格标签。您可以创建一个计算价格的简单函数并显示它。

通过将onchange属性添加到<select>

，只要选择列表发生变化，您就可以执行该功能

这样的事情：

<?PHP
   $price = 10;
   $numofguests = 5;

   $options="";

   while ($i <= $numofguests):
       $options .= '<option value="' .$i. '">' .$i. '</option>'; 
       $i++;
   endwhile;
?>

<html>
    <p id="price"><?= $price; ?></p>

    <select name="numberofguests" id="numberofguests" onchange="updatePrice()">
        <?= $options; ?>
    </select>

    <script>
        function updatePrice(){
            // set the value of the JS price with the value from PHP
            var price = <?= $price; ?>;
            var qty = document.getElementById("numberofguests").value;
            var totalPrice = price * qty;

            var destination = document.getElementById("price");

            destination.innerHTML = totalPrice;
        }
    </script>

</html>

Answer 4

使用select的onChange事件来运行一个javascript函数，该函数会更改打印总价格的HTML。更具体地说，我需要查看打印总价格的HTML代码。

根据Select的选择，动态更改变量的值

4 个答案: