Question

在我的数据库中，我有一个表格，我可以为此宽度x高度添加宽度，高度和匹配价格。

现在，我在网站的下拉菜单中显示了显示宽度x高度的代码。但是我唯一能做到的就是如果我点击我的下拉列表中的宽度x高度，它的匹配价格会显示在我页面的其他位置。

<?php
      $query = "SELECT * FROM shop_customoptions";
      $stmt = $conn->query( $query );

        $dropdown = "<select name='id' id='formaat_selecteren'>";
        foreach ($stmt as $row) {
        $dropdown .= "\r\n<option value='{$row['prijs']}'>{$row['breedte']} x {$row['hoogte']}</option>";
         }
        $dropdown .= "\r\n</select>";
        echo $dropdown;
    ?>

有人能帮助我做到这一点吗？

我已经找到了一个使用javascript的解决方案：

<script type="text/javascript">
          $("#formaat_selecteren").change(function() {
          if ($.isNumeric($(this).val())) {
          $(".price").html("&euro; " + $(this).val());
          } else {
          $(".price").empty();
          };
          });
        </script>

但它没有用a显示价格，如果有的话，我宁愿用PHP解决。

Answer 1

试一试

<script type="text/javascript">
    $("#formaat_selecteren").change(function() {
    if ($.isNumeric($(this).val())) {
    $(".price").html("&euro; " + String($(this).val()).replace('.',','));
    } else {
    $(".price").empty();
    };
    });
</script>

Answer 2

    <script type="text/javascript">
        $(document).ready(function() {
            $("#formaat_selecteren").on("change", function() {
                if ($.isNumeric($(this).val())) {
                    $(".price").html("$ " + String($(this).val()).replace('.',','));
                } else {
                    $(".price").empty();
                };
            });
        });
    </script>

    <span class="price"></span>

Answer 3

当你说“但它没有显示价格时，”我猜你的意思是价格没有格式化，例如“€2,000”。如果这是真的，你可以尝试这样的事情。

PHP - 将格式化的价格添加为数据属性。这假设您在PHP中设置了区域设置，并且您可能希望采用不同的格式，请参阅文档：http://php.net/manual/en/function.money-format.php

$dropdown .= "\r\n<option value='{$row['prijs']}' data-price='" . money_format('%.2n', $row['prijs']) . "'>{$row['breedte']} x {$row['hoogte']}</option>";

Javascript - 抓取并使用该数据属性：

$("#formaat_selecteren").change(function() {
    var formattedPrice = $(this).data('price');
    if ($.isNumeric($(this).val())) {
        $(".price").html(formattedPrice);
    } else {
        $(".price").empty();
    };
});

在另一个div中显示选项值

3 个答案: