提问者:小点点

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


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

null

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>

null


共1个答案

匿名用户

1)方法名称拼写错误:onchange应替换为onchange(链接)

2)元素嵌套存在一些问题(例如,您的divother不仅包括输入,还包括一些其他元素),请尝试以下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" />