How can I include values in my javascript populated drop down list to include in a price calculator?

Question

Here is my code sample:

    <script>
    const td=new Date();               // set Date object td to today
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    td.setDate(td.getDate()+3)
    ndays = td - new Date();
    let deadline = td.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
    document.cookie = "ndays = " + ndays;
    offset = td.getTimezoneOffset();
    const opts=[...Array(18)].map(_=>{  // generate an Array of 7 (empty) elements
    let r=td.toLocaleString("en-us",{weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}) + " @ "+deadline+" "+timezone+" Time ("+ Math.round(ndays/60/60/24/1000) + " days)"; // format date td
     td.setDate(td.getDate()+1);       // increment td by one calendar day
     ndays = td - new Date();
     return r                          // return date string to opts array 
      })
     </script>
    <select name="deadline" id="deadline" class="form-control" required="required">             
    <script>
    document.querySelector("select").innerHTML=opts.map(o=>`<option>${o}</option>`).join("") // make options
    </script>
    </select>

I need to be able to add incremented values based on the deadline selected to include in a pricing calculation. For example, if the order is:

• 15 or more days: the price would be $10 per unit (a factor of 1)
• 10 to 14 days: it would be $12 per unit (a factor of 1.2)
• 7 days: $13 per unit (a factor of 1.3)
• 5 days: $14 (a factor of 1.4)
• 3 days: $15 (a factor of 1.5)

Answer 1

You're using document.querySelector("select").innerHTML to write a string of the options to the <select> element. First add the days to the opts array:

const opts=[...Array(18)].map(_=>{
    let numdays = Math.round(ndays/60/60/24/1000);
    //...
    ndays = td - new Date();
    return [numdays, r];
});

...then, when looping it, add the days to the option value and text to the option element:

document.querySelector("select").innerHTML = opts.map(([d,o])=>`<option value="${d}">${o}</option>`).join("");

Use the document.querySelector("select") change event listener to implement your pricing calculator.

---

All together:

 // WRITE DATE OPTIONS ARRAY const opts = writeDateOptions(); // WRITE DATE OPTIONS TO SELECT ELEMENT const sel = document.getElementById("deadline"); sel.innerHTML = "<option></option>" + opts.map(([d,o])=>`<option value="${d}">${o}</option>`).join(""); // GET DAYS AND FACTOR ON SELECT CHANGE EVENT sel.addEventListener("change", function (evt) { let days = parseInt(evt.target.options[evt.target.selectedIndex].value); let factor = 0; switch (days) { case 3: case 4: factor = 1.5; break; case 5: case 6: factor = 1.4; break; case 7: case 8: case 9: factor = 1.3; break; case 10: case 11: case 12: case 13: case 14: factor = 1.2; break; case 15: default: factor = 1.0; } // price calculator here? document.getElementById("daysfactor").innerText = days + " days, " + factor + " factor"; }); // this is a simply a function wrapped around the date/options array code to be able to move it to the bottom of the code so as to emphasize the bulk of the additional code function writeDateOptions () { const td=new Date(); // set Date object td to today const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; td.setDate(td.getDate()+3); ndays = td - new Date(); let deadline = td.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); //document.cookie = "ndays = " + ndays; // stackoverflow doesn't like no one messin' with her cookies offset = td.getTimezoneOffset(); // return days/desc options array return [...Array(18)].map(_=>{ let numdays = Math.round(ndays/60/60/24/1000); let r=td.toLocaleString( "en-us", {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'} ) + " @ "+deadline+" "+timezone+" Time ("+ numdays + " days)"; // format date td td.setDate(td.getDate()+1); // increment td by one calendar day ndays = td - new Date(); return [numdays, r]; // return days and date string to opts array }); }

 <select name="deadline" id="deadline" class="form-control" required="required"></select> <div id="daysfactor"></div>

OR, create each option element and add the value and text content while looping your dates array.

// replace vvvv
// document.querySelector("select").innerHTML = opts.map(([d,o])=>`<option value="${d}">${o}</option>`).join("");
// with vvvv


// ADD OPTIONS WITH VALUES AND TEXT TO SELECT
const sel = document.querySelector("select");
sel.appendChild(document.createElement("option")); // blank option first
opts.forEach(function ([numdays, desc]) {
  let opt = document.createElement("option");
  opt.value = numdays;
  opt.textContent = desc;
  sel.appendChild(opt);
});