这是我的索引文件代码。每当我在下拉列表中选择某些内容时，就会显示相关的下拉列表。
我将此代码放入我的文件中，但选择主要类型后无法下拉。
css文件代码为.hide{display:none;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class=" hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>
最佳答案
您的问题是类型 class="hide" 更改为 class="hide"
并且您需要将script移动到关闭body标签之前，而不是head标签。
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
//$('.hide').show();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});.hide{
display:none;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class="hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>关于javascript - jquery 用于下拉选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61768406/