在我的网页上,我想要有两个下拉菜单,如果您从第一个下拉菜单中选择不同的选项,则第二个下拉菜单中将出现不同的选项。
例如,
如果在下拉列表 1 中选择类别 A,
我希望 A1、A2、A3 显示在下拉列表 2 中。
如果在下拉列表 1 中选择类别 B,
我希望 B1、B2、B3 显示在下拉列表 2 中。
如果我的 HTML 包含以下文本行:
<select id="independent">
<option value="CatA"> A </option>
<option value="CatB"> B </option>
</select>
<select id="dependent">
<option value="A021"> A1 </option>
<option value="A22019"> A2 </option>
<option value="A3541"> A3 </option>
<option value="B148"> B1 </option>
<option value="B2"> B2 </option>
<option value="B397415"> B3 </option>
</select>
我如何使用 JavaScript/jQuery 实现我想要的内容?
最佳答案
使用 jQuery 事件 .on 并监听选择框中的更改 1。如果所选选项发生更改,请查找选择了哪个值,然后根据所选选项修改第二个选择框。
这是一个简单的片段
$(document).ready(function() {
$("#dependent > option").hide();
$(document).on('change', '#independent', function() {
var val = $(this).val();
console.log(val);
$("#dependent > option").show();
if (val == 'CatA') {
$("#dependent > option").each(function() {
var optionVal = $(this).val();
var letter = optionVal.charAt(0);
//console.log(letter);
if (letter == 'B')
$(this).hide();
});
} else if (val == 'CatB') {
$("#dependent > option").each(function() {
var optionVal = $(this).val();
var letter = optionVal.charAt(0);
//console.log(letter);
if (letter == 'A')
$(this).hide();
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
<option value=""> Select </option>
<option value="CatA"> A </option>
<option value="CatB"> B </option>
</select>
<select id="dependent">
<option value=""> Select </option>
<option value="A1"> A1 </option>
<option value="A2"> A2 </option>
<option value="A3"> A3 </option>
<option value="B1"> B1 </option>
<option value="B2"> B2 </option>
<option value="B3"> B3 </option>
</select>
关于javascript - 第二个下拉菜单内容依赖于第一个下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44709388/