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

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

javascript select

如何使用Javascript对select元素的选项进行排序？,javascript,select,Javascript,Select,在我的程序中，我有两个选择元素，允许用户选择他们可以购买的特定电话和电话配件 <label for="choose-phone">Choose phone to buy: </label> <select id="choose-phone"> <option value=""></option> <option selected="selected" id="phone1" value="iPhone X">iPho

在我的程序中，我有两个选择元素，允许用户选择他们可以购买的特定电话和电话配件

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

现在的默认选项是iPhoneX和手机壳，但我不知道如何选择不同的手机和配件，以及如何使用它们各自的价格。我想做一个名为

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

变量。

您需要为您的选择设置一些

onchange

处理程序。然后，您可以为price元素添加一些自定义数据属性，并在helper方法中使用这些属性。我将把其余的业务逻辑留给您，但这应该可以回答您的问题

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>

jsiddle

那么，您是否试图根据所选手机修改附件列表？有很多重复的东西。考虑在这里发布一个可运行的片段，链接RoT。也意味着你可以只发布正文内容并删除DoType、Head等；

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

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