下拉列表包含多个位置,这些位置应相应地显示打开的日期和时间


<form class="branch-time-selection"><select>
<option selected="selected" data-branch-item="0" value="locationOne">location One</option>
<option data-branch-item="1" value="locationTwo">location Two</option>
<option data-branch-item="2" value="locationThree">location Three</option>
<option data-branch-item="3" value="locationFour">location Four</option>
<option data-branch-item="4" value="locationFive">location Five</option>
</select>
</form>

我不知道如何开始,位置 1、2 和 3 有这些时间: 周一至周四

上午 9 点至晚上 9 点 周五上午 9 点至下午 6 点 周六上午 9 点至下午 5 点 周日中午 12 点至下午 5 点位置 4 有以下时间: 周二至周四上午 10 点至晚上 8 点 周五至周六上午 10 点至下午 4 点 周日至周一关闭

地点 5:周一上午 9 点至下午 2 点 周二中午 12 点至下午 5 点周三下午 2 点至晚上 7 点 周四中午 12 点至下午 5 点 周五至周日休息

根据一周中的当前日期以及从下拉列表中选择的位置,我想显示这些小时数。例如,如果今天是星期三,我选择位置 5,则应显示下午 2 点至晚上 7 点。请在这里查看我的完整小提琴:https://jsfiddle.net/r1ox8a0c/

希望我的代码可以以某种方式帮助您,祝你有美好的一天!

<html>
<head></head>
<body>
<div id="hour"></div>
<form class="branch-time-selection">
<select id="sample" onchange="printHour(this.value)">
<option data-branch-item="1" value="locationOne">location One</option>
<option data-branch-item="5" value="locationFive">location Five</option>
</select>
</form>
<script>
// will return 0 as sunday, 1 as monday and go on
var today = (new Date()).getDay();
// uncomment this code bellow to mock today as tuesday
// var today = 2
// set branch open hour
var branch = {
"locationOne" : [
"12pm-5pm", //sunday
"9am-9pm",
"9am-9pm",
"9am-9pm",
"9am-9pm",
"9am-6pm",
"9am-5pm" //saturday
],
"locationFive" : [
"closed", //sunday
"9am-2pm",
"12-5pm",
"2pm-7pm",
"12pm-5pm",
"closed",
"closed" //saturday
]
}

function printHour(val) {
if(val){
document.getElementById("hour").innerHTML =  branch[val][today]
}
}
// print on load
printHour(document.getElementById("sample").value)
</script>
</body>
</html>

最新更新