使用javascript从两个不同的输入中选择后显示特定文本

Question

我有2个不同的选择字段具有一个size （例如， 10 ， 20 ， 30 ），而另一个带color （ red ， green ， yellow ）。 对于size和color ，根据选择的内容，我有不同的价格，例如 10，红色价格为 200 欧元，20 绿色价格为 300 欧元等。

现在我需要知道如何使用 JavaScript 执行此操作，以便在我选择下面的尺寸和颜色输入以显示价格之后。

你能给我一个 JavaScript 映射或类似的例子吗？

 <select id="size" name="size">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
 </select> 

 <select id="color" name="color">
     <option value="red">red</option>
     <option value="green">green</option>
     <option value="yellow">yellow</option>
 </select> 

Answer 1

您可以使用一个包含与颜色和大小相对应的所有值的对象来执行此类操作

 var data = { green: { 10: '100Euro', 20: '200Euro', 30: '300Euro' }, red: { 10: '400Euro', 20: '500Euro', 30: '600Euro' }, yellow: { 10: '150Euro', 20: '250Euro', 30: '370Euro' } } // bind change event handler to listen change event $('#color,#size').change(function() { // getting value from data object based on selected value and updating div text $('#res').text(data[$('#color').val()][$('#size').val()]); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="size"> <option value=10>10</option> <option value=20>20</option> <option value=30>30</option> </select> <select id="color"> <option value=red>red</option> <option value=green>green</option> <option value=yellow>yellow</option> </select> <div id=res></div>