Javascript 如何创建onChange事件来显示单独的HTML选择标记？

我对这件事有疑问

我有这些HTML代码

code.html

我的目标是允许用户使用单选按钮或其他选择在上午或下午之间进行选择

如果用户选择radiobutton morning，则仅选择timeA显示，timeB将隐藏

如果用户选择radiobutton午后，则仅选择timeB显示，timeA将隐藏

---

请帮帮我。谢谢

我根据您已有的内容给出了您所需的最小更改，但请进一步研究以改进它，并将此事件建立在函数中。 我所做的更改是在每个标签上添加一个单击事件，添加或删除每个元素的隐藏属性，该属性隐藏了元素，正如名称所示。请查看底部的参考资料

<label onclick="document.getElementsByName('timeA')[0].removeAttribute('hidden'); document.getElementsByName('timeB')[0].setAttribute('hidden','');">Morning</label>
<select name="timeA" required="" hidden>
    <option value="">Select Time From</option>
    <option value="0800">8:00 AM</option>
    <option value="0900">9:00 AM</option>
    <option value="1000">10:00 AM</option>
    <option value="1100">11:00 AM</option>
</select>

<label onclick="document.getElementsByName('timeB')[0].removeAttribute('hidden'); document.getElementsByName('timeA')[0].setAttribute('hidden','');">Afternoon</label>
<select name="timeB" required="" hidden>
    <option value="">Select Time From</option>
    <option value="1200">12:00 PM</option>
    <option value="1300">1:00 PM</option>
    <option value="1400">2:00 PM</option>
    <option value="1500">3:00 PM</option>
</select>

你可以像这样使用收音机切换功能

$'select[name=timeB]'。隐藏； $'input[name=time]'。changefunction{ 如果$'r1:已选中。长度>0{ $选择[name=timeA'。显示； $选择[name=timeB'。隐藏； }否则{ $选择[name=timeB'。显示； $选择[name=timeA'。隐藏； } }; 早晨 下午 从中选择时间 上午8:00 上午9点 上午10:00 上午11:00 从中选择时间 下午12:00 下午1:00 下午2:00 下午三点

---

我们总是很乐意帮助和支持新的程序员，但你需要首先帮助自己。之后，如果你有问题，请发布你尝试过的内容，并清楚解释哪些内容不起作用。阅读。另外，请务必阅读，这对我来说似乎是一项家庭作业，因为这是一项非常简单的任务。你能告诉我们你的努力吗ied到目前为止？这可能是以前问过的问题的重复。但是，是的，请在发布之前四处搜索答案。这是一件非常简单且有很好文档记录的事情，特别是因为您使用的是jquery。为什么不选择一个并根据收音机选择启用/禁用am/pm选项？

<label onclick="document.getElementsByName('timeA')[0].removeAttribute('hidden'); document.getElementsByName('timeB')[0].setAttribute('hidden','');">Morning</label>
<select name="timeA" required="" hidden>
    <option value="">Select Time From</option>
    <option value="0800">8:00 AM</option>
    <option value="0900">9:00 AM</option>
    <option value="1000">10:00 AM</option>
    <option value="1100">11:00 AM</option>
</select>

<label onclick="document.getElementsByName('timeB')[0].removeAttribute('hidden'); document.getElementsByName('timeA')[0].setAttribute('hidden','');">Afternoon</label>
<select name="timeB" required="" hidden>
    <option value="">Select Time From</option>
    <option value="1200">12:00 PM</option>
    <option value="1300">1:00 PM</option>
    <option value="1400">2:00 PM</option>
    <option value="1500">3:00 PM</option>
</select>