[英]How can I include values in my javascript populated drop down list to include in a price calculator?
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:例如,如果订单是:
You're using document.querySelector("select").innerHTML
to write a string of the options to the <select>
element.您正在使用document.querySelector("select").innerHTML
将选项字符串写入<select>
元素。 First add the days to the opts
array:首先将天数添加到opts
数组中:
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.使用document.querySelector("select")
change
事件侦听器来实现您的定价计算器。
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.