Question

很久以前，我在网上搜索但我无法找到适合我的解决方案。我必须写下我希望论坛找到适合我的帮助。

首先，我有一个下拉菜单，提供了多种选择。这是清单

<Form name = "sellalcatel" form method = "post" action = "traitement.php" onchange = "return vefify ();">
    <Select name = "Alcatel">
        <Option> Please Select <option>
        <Option value = "Alcatel-1230 + ZTE811"> Alcatel 1230 (ZTE 811) </ option>
        <Option value = "Alcatel-1231"> Alcatel 1231 </ option>
        <Option value = "Alcatel-351"> Alcatel 351 </ option>
    </ Select>
    <Li class = "last">
        Country <input type = "text" size = "40">
        <P> Name <INPUT NAME = "Name" SIZE = 40> </ p>
        <P> Enter your Mail <input name = "email" placeholder = "mail@example.com" required> </ p>
        <Input name = "button" type = "submit" value = "unlock"> </ input>
    </ Li>
</ Form>

我希望在选择下拉列表后根据选择显示价格：例如，如果客户选择第一个应该显示$ 3 usd，如果第二个Usd $ 4，$ 2 for第三个usd等等。

NB~我想要收回钱但只是显示它而不重新加载页面，很多网站建议制作BDD但我的问题是我不知道如何把价格放在数据库中，还有属性在下拉列表中找到正确的值。

那么有没有其他解决方案来显示价格，或者我可以获得帮助或数据库，我想要更低的价格？

Answer 1

实现这一目标的最佳方法是使用javascript。

<select id="dropdown">
  <option value="1.00">$1.00</option>
  <option value="12.43">$12.43</option>
  <option value="37.21">$37.21</option>
</select>

JavaScript的：

var e = document.getElementById("dropdown");
var value = e.options[e.selectedIndex].value; // The value
var text = e.options[e.selectedIndex].text; // The text

或jQuery：

$("#dropdown :selected").text(); // The text
$("#dropdown").val(); // The value

data属性允许您将自定义数据添加到HTML元素。

E.G

HTML

<option data-price="12" value="1.00">$1.00</option>

Jquery的

$(this).data("price")

Answer 2

要实现系统所需的功能，可以使用Javascript。但是对于我的回答，我们将使用jQuery，这是一个Javascript库。

首先下载jQuery，然后在标题中调用它：

<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE THE SRC DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->

选项1：

让我们在显示价格的位置创建div：

<div id="result"></div>

然后我们在id上添加select标记：

<select name="Alcatel" id="alcatel">

如果您的选项已修复，您可以手动为javascript上的每个选项创建条件。

$(document).on("change", "#alcatel", function(){

    var alcatelval = $(this).val();

    if(alcatelval == 'Alcatel-1230 + ZTE811'){
        $("#result").text('USD 399');
    } else if(alcatelval == 'Alcatel-1231'){
        $("#result").text('USD 299');
    } else if(alcatelval == 'Alcatel-351'){
        $("#result").text('USD 169');
    }

});

例如，您可以查看此jsfiddle。

选项2：

将所有选项与相应的价格一起放在数据库中：

phone_tb：

phone_id | brand_id | model | price
---------+----------+-------+--------
    1    |     1    | 1230  |  399
    2    |     1    | 1231  |  299
    3    |     1    | 351   |  169

brand_tb：

brand_id | brand_desc
---------+------------
    1    |  Alcatel
    2    |  Samsung
    3    |  Apple

然后获取下拉列表的选项，您可以在其中包含价格以及模型和说明，因此您无需使用Javascript来了解设备的价格：

<select name="Alcatel" id="alcatel">
<?php

    $stmt = $YourDBConnection->prepare("SELECT a.phone_id, a.model, a.price, b.brand_desc FROM phone_tb a LEFT JOIN brand_tb b ON a.brand_id = b.brand_id");
    $stmt->execute();
    $stmt->bind_result($phoneid, $model, $price, $brand);
    while($stmt->fetch()){
        echo '<option value="'.$phoneid.'">'.$brand.'-'.$model.' - '.price.'</option>';
    }
    $stmt->close();

?>
</select>

在下拉列表中选择元素后显示价格

2 个答案:

选项1：

选项2：