如何根据下拉菜单更改文本框 [英] How to make a text box change depending on a dropdown menu

问题描述

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

 < form action =index.phpmethod =POST> 
< p>产品：< / p> 
< select id =myPRODUCTS> 
< option value =Apple> Apple< / option> 
< option value =Orange>橙色< /选项> 
< option value =Mango> Mango< / option> 
< / select> 
< p>价格：< / p>< input type =textname =Pricereadonly =readonly/> 
  

所以我想要价格文本框改变，如果我选择苹果我希望它是£0.45或者如果我选择橙色，我希望它是0.50英镑，依此类推。我会怎么做？

在此先感谢，
Marek

解决方案 div>

这段代码显示了你可以如何完成你所寻求的事情。

正如其他人所说的，它并不完全是最安全/有效的方法，特别是如果你正在处理真钱，但所有你需要做的就是使用< script src =http://code.jquery.com/jquery-latest.min.js将jquery添加到你的html文件中。 >< / script>

  $（'＃myPRODUVTS'）。 '，$ {
 $（'＃Price'）。val（' （$'$ 0.50'）; 
} 
 if（fruit =='Orange'）{
 $（'＃Price'）。val（'£0.50'）; 
} 
 if（fruit =='Mango'）{
 $（'＃Price'）。val（'£0.65'）; 
} 
}）; 
  

http://jsfiddle.net/LtBh6/ ，它显示了你的例子中的代码。

I would like to know how to make a text box change according to a drop down menu. So for example ...

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

So I want the price text box to change if I have selected Apple I want it to be £0.45 or if I select orange I want it to be £0.50 and so on. How would I do this?

Thanks in advance, Marek

解决方案

This code shows how you can accomplish what you seek.
As others have mentioned, it's not exactly the most secure / efficient way to do this, especially if you're dealing with real money, but all you have to do to get this to work is add jquery to your html file with <script src="http://code.jquery.com/jquery-latest.min.js"></script>

$('#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/ this shows the code in action with your example.

这篇关于如何根据下拉菜单更改文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！