Question

我对onChange事件有疑问。

我有这些HTML代码

code.html

<label>Morning</label>
<select name="timeA" required="">
    <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>Afternoon</label>
<select name="timeB" required="">
    <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>

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

如果用户选择radiobutton morning，则只选择＆＃34; timeA＆＃34;节目和＆＃34; timeB＆＃34;将隐藏。

如果用户选择radiobutton下午，则只选择＆＃34; timeB＆＃34;节目和＆＃34; timeA＆＃34;将隐藏。

请帮帮我。谢谢。

Answer 1

我根据您已经拥有的内容给出了您需要的最小更改，但请进行更多研究以改进它并将此事件基于函数。我所做的更改是在每个标签上添加一个click事件，添加或删除每个元素的“hidden”属性，该属性隐藏元素，如名称所示。请查看底部的参考资料。

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

https://www.w3schools.com/code/tryit.asp?filename=FOIIF5EU0Q3V

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onclick

Answer 2

您可以像这样使用radio更改功能。

$('select[name=timeB]').hide();
$('input[name=time]').change(function() {
  if ($('#r1:checked').length > 0) {
    $('select[name=timeA').show();
    $('select[name=timeB').hide();
    
  } else {
    $('select[name=timeB').show();
    $('select[name=timeA').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' id='r1' name='time' checked/>
<label for='r1'>Morning</label>
<input type='radio' id='r2' name='time' />
<label for='r2'>Afternoon</label>
<select name="timeA" required="">
  <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>


<select name="timeB" required="">
  <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>

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

2 个答案: