Question

我有一个组合框，我可以选择特定的车辆，每个都有发动机尺寸，名称和价格包装在一个数组。如果选择车辆1，我想将其价格加到总金额上。这是我的代码：

HTML

<select id="selector" onChange="Expedisi(this);">
            <option>Select product</option>
          <optgroup label="Sedan">
            <option value="Lancer EX">Lancer EX 1.6 / 2.0</option>
            <option value="Lancer EX GT">Lancer EX GT</option>
          <optgroup label="Sport">
            <option value="Lancer Evolution X">Lancer Evolution X</option>
          <optgroup label="SUV">
            <option value="Outlander">Outlander</option>
        </select>

的JavaScript

var data = { 
    "Lancer EX" : { img: "cars/mitsubishi/lancerex.png" , label: "Lancer EX " , engine: "1.6 L" , price :"16500" },
    "Lancer EX GT" : { img: "cars/mitsubishi/gt.png", label: "Lancer EX GT", engine: "2.0 L" , price: "22000"},
    "Lancer Evolution X" : { img: "cars/mitsubishi/evox.jpg", label: "Evolution X", engine:"2.0L Turbocharged", price: "85000" },
    "Outlander" : { img: "cars/mitsubishi/outlander.jpg", label: "Outlander", engine: "2.0 L" , price : "33000" },
};

我想将所选车辆的价格从组合框添加到Total，最初为0。谢谢。

Answer 1

您可以使用所选值作为属性名称来访问对象中的正确车辆。例如：

data[$(this).val()].price

var data = { 
    "Lancer EX" : { img: "cars/mitsubishi/lancerex.png" , label: "Lancer EX " , engine: "1.6 L" , price :"16500" },
    "Lancer EX GT" : { img: "cars/mitsubishi/gt.png", label: "Lancer EX GT", engine: "2.0 L" , price: "22000"},
    "Lancer Evolution X" : { img: "cars/mitsubishi/evox.jpg", label: "Evolution X", engine:"2.0L Turbocharged", price: "85000" },
    "Outlander" : { img: "cars/mitsubishi/outlander.jpg", label: "Outlander", engine: "2.0 L" , price : "33000" },
};

var total = 0;

$('#selector').on('change', function() {
    total = data[$(this).val()].price;
    console.log(total);

    $('#thetotal').text("The total is: " + total);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="selector">
  <option>Select product</option>
  <optgroup label="Sedan">
  <option value="Lancer EX">Lancer EX 1.6 / 2.0</option>
  <option value="Lancer EX GT">Lancer EX GT</option>
  <optgroup label="Sport">
  <option value="Lancer Evolution X">Lancer Evolution X</option>
  <optgroup label="SUV">
  <option value="Outlander">Outlander</option>
</select>

<p id="thetotal"></p>

Answer 2

您可以更改Expedisi功能，如下所示 -

 var data = {
     "Lancer EX": {
         img: "cars/mitsubishi/lancerex.png",
         label: "Lancer EX ",
         engine: "1.6 L",
         price: "16500"
     },
     "Lancer EX GT": {
         img: "cars/mitsubishi/gt.png",
         label: "Lancer EX GT",
         engine: "2.0 L",
         price: "22000"
     },
     "Lancer Evolution X": {
         img: "cars/mitsubishi/evox.jpg",
         label: "Evolution X",
         engine: "2.0L Turbocharged",
         price: "85000"
     },
     "Outlander": {
         img: "cars/mitsubishi/outlander.jpg",
         label: "Outlander",
         engine: "2.0 L",
         price: "33000"
     },
 };


 function Expedisi(elem) {
     var total = 0;
     total += parseInt(data[elem.value].price, 10);
     console.log(total);

 }

在jquery数组中选择价格并添加到Total

2 个答案: