CODEWITHSUNDEEP
javascriptselect
user9440272
user9440272

Reputation:

How to sort through the options of a select element with Javascript?

In my program, I have two select elements that allows a user to select a certain phone and phone accessory that they can buy 

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

I basically want the user to select whatever phone and accessory they want. A function called confirmPurchase calculates the costs of both items and includes the tax rate:

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

Right now the default options are the iPhone X and phone case but I don't know how to select different phones and accessories and use their respective prices. I thought of doing a function called function choosePhone() { //possible switch statement to select phone } and I've also thought about accessing the index from each select element and using them to get these price variables:

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;

Again, the default options as of right now are the iPhone and the phone case so the purchase function uses both the iphonePrice variable and the casePrice variable.

Upvotes: 1

Views: 47

Answers (1)

Joshua Manns
Joshua Manns

Reputation: 585

You need to set some onchange handlers for your select. Then you can add some custome data attributes to your elements for price and use those in your helper methods. I'll leave the rest of your business logic to you, but this should answer your question.

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/

Upvotes: 1

Related Questions