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

【问题标题】：Change the value of a variable on the fly depending on the selection of a Select根据 Select 的选择动态更改变量的值
【发布时间】：2016-05-25 15:31:56
【问题描述】：

我有以下 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

所以默认情况下，客人人数为 1，总价 = 5 美元

但如果用户选择 num of guest = 2 我希望总价更改为 $10，如果 num of guest = 3 我希望总价更改为 $15

非常感谢

【问题讨论】：

标签： javascript php select drop-down-menu

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：