Question

我有两个不同的选择字段，一个带size（例如10，20，30），另一个带有color（{{ 1}}，red，green）。对于yellow和size，根据所选内容，我有不同的价格，如10，红色价格是200EUR，20绿色价格是300EUR等。

现在我需要知道如何使用JavaScript这样做之后我选择了尺寸和颜色输入后显示价格。

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

color

Answer 1

您可以使用包含与颜色和大小相对应的所有值的对象

来执行此类操作

＆＃13;

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()]);
})

＆＃13;

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

＆＃13;

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

1 个答案: