Question

在我的程序中，我有两个选择元素，允许用户选择他们可以购买的某个手机和手机配件

<label for="choose-phone">Choose phone to buy: </label>
<select id="choose-phone">
  <option value=""></option>
  <option selected="selected" id="phone1" value="iPhone X">iPhone X -- $800.00</option>
  <option id="phone2" value="Samsung Galaxy s9">Samsung Galaxy s9 -- $550.00</option>
  <option id="phone3" value="Microsoft Lumia 950 XL">Microsoft Lumia 950 XL -- $70.00</option>
</select>

  <label for="choose-accessory">Choose accessory to buy: </label>
<select id="choose-accessory">
  <option value=""></option>
  <option selected="selected" id="accessory1" value="Phone case">Phone case -- $35.00</option>
  <option id="accessory2" value="Headphones">Headphones -- $20.00</option>
  <option id="accessory3" value="Screen Protector">Screen Protector -- $19.99</option>
  <option id="accessory4" value="Star Trek(™) Bluetooth Communicator">Star Trek(™) Bluetooth Communicator -- $150.00 </option>
</select>

我基本上希望用户选择他们想要的任何手机和配件。名为confirmPurchase的函数计算两个项目的成本，并包括税率：

function confirmPurchase() {
currentBalance;
//phoneAndAccessory is a temporary variable 
let phoneAndAccessory = iphonePrice + casePrice;
taxedTotal = (phoneAndAccessory * taxRate) + phoneAndAccessory;
paraForCost.innerHTML = "The total cost for " + phone1 + " and " + 
accessory1 + " is $" + taxedTotal;
updateBalance()
}

目前默认选项是iPhone X和手机外壳，但我不知道如何选择不同的手机和配件并使用各自的价格。我想过做一个名为function choosePhone() { //possible switch statement to select phone }的函数，我还考虑过从每个select元素访问索引并使用它们来获取这些价格变量：

const iphonePrice = 800.00;
const samsungPrice = 550.00;
const microsoftPrice = 70.00;

const casePrice = 35.00;
const headphonesPrice = 20.00;
const protectorPrice = 19.99;
const communicatorPrice = 150.00;

此外，目前的默认选项是iPhone和手机外壳，因此购买功能同时使用iphonePrice变量和casePrice变量。

Answer 1

您需要为您的选择设置一些onchange处理程序。然后，您可以为元素添加一些自定义数据属性以获取价格，并在辅助方法中使用这些属性。我会将剩下的业务逻辑留给您，但这应该回答您的问题。

<强> HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <label for="choose-phone">Choose phone to buy: </label>
  <select id="choose-phone" onchange="setPrice(this, 'phone')">
    <option value=""></option>
    <option selected="selected" id="phone1" value="iPhone X" data-price="800">iPhone X -- $800.00</option>
    <option id="phone2" value="Samsung Galaxy s9" data-price="550">Samsung Galaxy s9 -- $550.00</option>
    <option id="phone3" value="Microsoft Lumia 950 XL"  data-price="70">Microsoft Lumia 950 XL -- $70.00</option>
  </select>

    <label for="choose-accessory">Choose accessory to buy: </label>
  <select id="choose-accessory" onchange="setPrice(this, 'accessory')">
    <option value=""></option>
    <option selected="selected" id="accessory1" value="Phone case" data-price="35">Phone case -- $35.00</option>
    <option id="accessory2" value="Headphones" data-price="20">Headphones -- $20.00</option>
    <option id="accessory3" value="Screen Protector" data-price="19.99">Screen Protector -- $19.99</option>
    <option id="accessory4" value="Star Trek(™) Bluetooth Communicator" data-price="150">Star Trek(™) Bluetooth Communicator -- $150.00 </option>
  </select>
  <button onclick="confirmPurchase()">
    BUY
  </button>
</body>
</html>

<强> JS

var accessoryPrice = 35;
var phonePrice = 800;

function setPrice(el, source) {
    var option = el.options[el.selectedIndex];
    var price = option.getAttribute('data-price');

  if (source === 'phone') {
    phonePrice = parseFloat(price ? price : 0);
  } else if (source === 'accessory') {
    accessoryPrice = parseFloat(price ? price : 0);
  }
}

function confirmPurchase() {
    var total = phonePrice + accessoryPrice;
  alert(total);
}

JSFiddle https://jsfiddle.net/9bpvc4uy/16/

如何使用Javascript对select元素的选项进行排序？

1 个答案: