Question

当我在下拉列表中选择一个项目时，我想在文本框中显示价格。

这是我的代码连接到数据库。

{{1}}

Answer 1

您在哪里存储产品的价格？如果它们也在数据库中，则将它们作为属性添加到option-tag中。选择选择内部的选项只需通过jquery读取属性并设置文本框的值。

<?php
// your connection here :)
?>
<?php
    $query = $mysqli->query("SELECT * FROM products");
    echo '<select onChange="$(#output).val($(this).find('option:selected').attr('price'))">';
        while($obj = $query->fetch_object()){
            echo '
                <option value"'.$obj->product_name.'" price="'.$obj->price.'">'.$obj->product_name.'</option>
        ';
    }
    echo '</select>';
    echo '<input id="output" value="">';
?>

https://jsfiddle.net/23jzk61m/

Answer 2

使用属性存储价格并在选择更改时显示价格并选择属性并将其附加到价格区

尝试这样的事情：

    <?php
    // my connection here
    ?>
    <?php
        $query = $mysqli->query("SELECT * FROM products");
        echo '<select class="product">';
            while($obj = $query->fetch_object()){
                echo '
                    <option data-price="'.$obj->price.'" value="'.$obj->product_name.'">'.$obj->product_name.'</option>
            ';
        }
    echo '</select>';
    // if product1 is selected, the price is 100 and show in the textbox
    //
    ?>
    Price:<span class="price"></span>
    <script>
    $(function(){
    $('.product').change(function(){
     var price = $(this).find('option:selected').attr('data-price');
     $('.price').text(price+'$');
    });
    });
</script>

jsfiddle：https://jsfiddle.net/7h16duh9/

Answer 3

<?php // Internet connection here ?>

<select class="ProductName">
    <?
    $query = $mysqli->query("SELECT * FROM products");
  while($obj = $query->fetch_object())
    {?>
    // I assumed '$product_price' as column name. Change it if different
    <option value="<?php echo $obj->product_price; ?>"><?php echo $obj->product_name; ?></option>
    <?php }?>
</select>


<span class="ShowPrice">
    <input type="text" value="">
</span>

<script>
    $('.ProductName').change(function(){
        var Price=$('.ProductName').val();
        $.ajax({url:"Ajax-ShowPrice.php?Price="+Price,cache:false,success:function(result){
            $('.ShowPrice').html(result);
        }});
    }); 
</script>

Ajax-ShowPrice.php （创建新页面。请确保，如果您想在此更改页面名称，请更改<script></script>标记。两者都相关。）

<?
$Price=$_GET['Price'];
?>
<input type="text" value="<?php echo $Price;?>">

PHP = Dropdown From DB并在下拉列表中选择一个时执行价格

3 个答案: