如何根据下拉菜单更改文本框

Question

我想知道如何根据下拉菜单更改文本框。比如……

<form action="index.php" method="POST">
<p>Product:</p>
<select id = "myPRODUCTS">
<option value = "Apple">Apple</option>
<option value = "Orange">Orange</option>
<option value = "Mango">Mango</option>
</select>
<p>Price:</p><input type="text" name="Price" readonly="readonly" />

因此，如果我选择了 Apple，我希望价格文本框更改为 0.45 英镑，或者如果我选择橙色，我希望它为 0.50 英镑，依此类推。我该怎么做？

提前致谢， 马立克

Answer 1

此代码显示了您如何实现您的目标。
正如其他人所提到的，这并不是最安全/最有效的方法，特别是如果你正在处理真钱，但你所要做的就是使用<script src="http://code.jquery.com/jquery-latest.min.js"></script>将jquery添加到你的html文件中@

$('#myPRODUVTS').on('change', function() {
 fruit = $(this).val();
    if (fruit == 'Apple') {
        $('#Price').val('£0.45');
    }
    if (fruit == 'Orange') {
        $('#Price').val('£0.50');
    }
    if (fruit == 'Mango') {
        $('#Price').val('£0.65');
    }
});

http://jsfiddle.net/LtBh6/ 这显示了与您的示例一起运行的代码。

Answer 2

您确实创建了一个在选择更改时运行的 JS 函数。 该函数将重新加载页面并将价格值归因于一个变量，您将使用该变量为价格字段赋值。

当然，您应该在数据库中包含所有这些名称和价格，以便更容易选择值。

:)

一些更新：

有数据的数据库 查询那个数据库表调用

$result_consulta_mes（在我的例子中）

在 samefile.php 中一些 Js 将获取 select 的值并使用变量重新加载相同的文件。

<script>function unid()
{
    var mse=document.getElementById("select_mes");
    var mse2=mse.options[mse.selectedIndex].value;
    document.getElementById("mes_index").value = mse2;
    window.location.href = "samefile.php?rowmes=" + mse2;
}</script>

然后获取来自JS的变量值

<?php $varmes = "$_GET[rowmes]"; ?>

然后选择一会儿：

<input class="hidden" name="mes_index" type="text" id="mes_index" value= "<?php echo $varmes?>"><select data-size="20" id="select_mes" onchange="unid()" >
<?php
    $current_mes = $varmes;
    while($row_me = mysql_fetch_array($result_consulta_mes)){ 
    if ($row_me['mes_id'] == $current_mes){
    echo "<option selected value=" . $row_me['mes_id'] . ">" . $row_me['mes_mes'] . "</option>" ;}
    else {
    echo "<option value=" . $row_me['mes_id'] . ">" . $row_me['mes_mes'] . "</option>" ;}
    }
?></select>