在另一个div中显示选项值

时间:2016-04-18 14:12:54

标签: javascript php html

在我的数据库中,我有一个表格,我可以为此宽度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解决。

3 个答案:

答案 0 :(得分:1)

试一试

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

答案 1 :(得分:0)

    <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>

答案 2 :(得分:0)

当你说“但它没有显示价格时,”我猜你的意思是价格没有格式化,例如“€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();
    };
});