如果第一个下拉菜单用户只选择最喜欢的颜色蓝色或红色,我将如何选择宠物类型



这是我的代码。如果用户选择最喜欢的颜色是红色或蓝色,用户如何选择他们的宠物类型?如果用户选择最喜欢的颜色红色或蓝色,则宠物类型和提交按钮的下拉菜单不会出现。我没有基本的Javascript。

function checkchange() {
  if (document.getElementById('favouritecolour').value == 'OTHERS') {
    document.getElementById('other').style.display = 'block';
  } else {
    document.getElementById('other').style.display = 'none';
  }
};
function check() {
  if (document.getElementById('pets').value == 'OTHERS') {
    document.getElementById('besides').style.display = 'block';
  } else {
    document.getElementById('besides').style.display = 'none';
  }
};
<label for="favouritecolour">Favourite colour</label>
<select id='favouritecolour' onChange='checkchange()'>
  <option value='BLUE'>BLUE</option>
  <option value='RED'>RED</option>
  <option value='OTHERS'>OTHERS</option>
</select>
<div id='other' style="display: none">
  <input type='text' placeholder="FILL IN" />
  <br/>
  <label for="pets">Pets do you like</label>
  <select id='pets' onChange='check()'>
    <option value='DOG'>DOG</option>
    <option value='RABBIT'>RABBIT</option>
    <option value='OTHERS'>OTHERS</option>
  </select>
  <div id='besides' style="display: none">
    <input type='text' placeholder="FILL IN" />
    <input type="submit" name="SUBMIT" />
  </div>
</div>

1)您拼错了方法名:onChange应替换为onchange (link)

2)有一些问题与元素嵌套(例如,你的div other不仅包括输入,但一些其他元素),尝试这个HTML:

<label for="favouritecolour">Favourite colour</label>
<select id='favouritecolour' onchange='checkchange()'>
  <option value='BLUE'>BLUE</option>
  <option value='RED'>RED</option>
  <option value='OTHERS'>OTHERS</option>
</select>
<div id='other' style="display: none">
  <input type='text' placeholder="FILL IN" />
</div>
<br/>
<label for="pets">Pets do you like</label>
<select id='pets' onchange='check()'>
  <option value='DOG'>DOG</option>
  <option value='RABBIT'>RABBIT</option>
  <option value='OTHERS'>OTHERS</option>
</select>
<div id='besides' style="display: none">
  <input type='text' placeholder="FILL IN" />
</div>
<br/>
<input type="submit" name="SUBMIT" />

最新更新