如何在我的 javascript 填充下拉列表中包含值以包含在价格计算器中？

Question

这是我的代码示例：

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

我需要能够根据选择包含在定价计算中的截止日期添加增量值。 例如，如果订单是：

• 15 天或更长时间：价格为每单位 10 美元（1 倍）
• 10 到 14 天：每单位 12 美元（1.2 倍）
• 7 天：每单位 13 美元（1.3 倍）
• 5 天：14 美元（1.4 倍）
• 3 天：15 美元（1.5 倍）

Answer 1

您正在使用document.querySelector("select").innerHTML将选项字符串写入<select>元素。 首先将天数添加到opts数组中：

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

...然后，在循环时，将天数添加到选项值并将文本添加到选项元素：

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

使用document.querySelector("select") change事件侦听器来实现您的定价计算器。

---

全部一起：

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

或者，创建每个选项元素并在循环日期数组时添加值和文本内容。

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