我有 2 个带有相同选项的选择标签,男性和女性。 选择
之一,“age”被隐藏。
<select name="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:none;">
<option value="12">Male</option>
<option value="18">Female</option>
</select>
当用户在“性别”中选择“男性”时,我希望“年龄”也会自动选择“男性”。我期待与“女性”相同的东西。如何通过 javascript 实现?
最佳答案
您可以将事件 change
附加到您选择的 gender
并在每次更改时设置 age
的值。
请注意,这两个元素都应加载默认选定值,以防最终用户什么都不选择,并检查是否最好移动内联样式 style="display:none;"
到一个单独的 css 文件。
代码:
var gender = document.getElementsByName('gender')[0],
age = document.getElementsByName('age')[0];
gender.addEventListener('change', function() {
age.value = (gender.value == 1) ? 12 : 18;
console.log('Gender:', gender.value);
console.log('Age:', age.value);
});
<select name="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:none;">
<option value="12">Male</option>
<option value="18">Female</option>
</select>
关于javascript - 根据上一个选项自动选择 HTML 隐藏选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40550079/