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