下拉多个位置，应显示相应的营业时间和营业时间答案

【问题标题】：Drop down with multiple locations, that should display day and hours open accordingly下拉多个位置，应显示相应的营业时间和营业时间
【发布时间】：2020-02-13 15:11:23
【问题描述】：

<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：周一 9am-2pm 周二 12-5pm 周三 2pm-7pm 周四 12pm-5pm 周五至周日休息

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

【问题讨论】：

文本“2pm-7pm”应该显示在哪里？在下拉菜单下？
就在上面，在小提琴中你可以看到它现在显示的位置

标签： javascript html

【解决方案1】：

希望我的代码能以某种方式帮助您，祝您有美好的一天！

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

【讨论】：

谢谢！！但是有没有办法用 JS 来代替？？
欢迎您，“JS”是指不使用“jquery”吗？顺便说一句，“jquery”在技术上是“JS”库。所以用“jquery”写的所有东西实际上都是“JS”..
是的，我的意思是在 javascript 中
我怎样才能让位置一成为默认显示，直到做出另一个选择？
@Abigail 欢迎您。只需在脚本标签末尾调用 printHour("val you want") 即可。查看我的更新..