如何在加载jquery时隐藏下拉列表
再会，
我试图了解 JQuery 隐藏/显示和更改元素的工作原理。在示例中，有 4 个下拉菜单，第一个下拉菜单“请选择”具有更改功能。根据选择的选项，会出现正确的框。那里看起来不错。我遇到的唯一麻烦是如何隐藏除父框加载之外的所有内容。
小提琴：https : //jsfiddle.net/wj_fiddle_playground/mt69f5w4/15/
Javascript如下：
$(document).ready(function() {
$('#exampleFruit').change(function() {
var val = $('#exampleFruit').val();
$('.exampleSubselect').hide();
if(val) {
$('#example'+val).show();
}
回答
jQuery 方法的工作很简单：
show() 只需添加 css-property display: block
hide() 只需添加 css-propery display: none
所以你应该添加style="display: none;"到你的选择中
小提琴：https : //jsfiddle.net/kodxg0y8/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements</title>
</head>
<body>
<tr>
<select>
<option value="">-- Please Select --</option>
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
</select>
</tr>
<tr>
<select>
<option>Red Delicious</option>
<option>Granny Smith</option>
<option>Cox's Orange Pippin</option>
</select>
</tr>
<tr>
<select>
<option>Plantain</option>
<option>Burro</option>
<option>Cavendish</option>
</select>
</tr>
<tr>
<select>
<option>Blood</option>
<option>Navel</option>
<option>Valencia</option>
</select>
</tr>
</body>
</html>
$(document).ready(function() {
$('#exampleFruit').change(function() {
var val = $('#exampleFruit').val();
$('.exampleSubselect').hide();
if(val) {
$('#example'+val).show();
}
});
});