自动选择HTML隐藏选项值基于先前的选项
Autoselect HTML hidden option value based on previous option
我有2个选择标签,带有相同的选项,男性和女性。其中一个select
,"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>
这是一个使用jQuery的选项。
$(document).ready(function() {
$("#age").val("12");
$("#gender").change(function() {
var userselected = $(this).find(':selected').text();
if (userselected == "Male") {
$("#age").val("12");
} else {
$("#age").val("18");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="gender" id="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="age" style="display:inherit;" id="age">
<option value="12">Male</option>
<option value="18">Female</option>
</select>
相关文章:
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- 用户界面先前选择的选项选择更改
- 使用jquery如何自动删除下拉列表中的第一个空白选项(如果它依赖于另一个选项)
- 基于先前选择的拒绝选项
- 三个选项分别基于先前的jquery进行选择
- 删除基于先前下拉列表选择的“选择下拉列表”选项
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 选项卡分组和选项卡着色:如何将此功能应用于从我的网页打开的选项卡,而不考虑浏览器
- jqGrid基于先前的选择填充选择选项
- 如何创建一组从属选择列表,其中连续列表依赖于前面列表选项的选择
- 如何自定义类似于角度材质选项卡的 Angular Ui 引导选项卡
- 如何在单击时将 css 属性应用于选项卡
- 为什么选择选项上的 .click() 只适用于火狐浏览器
- 如何获取不同选项卡的实例,以便我可以存储变量/执行特定于各个选项卡的操作
- 关闭当前浏览器选项卡并专注于特定网址的浏览器选项卡 - javascript/jquery
- 存在于另一个数组中的过滤器选项
- 如何获取上一个/下一个非禁用选项的索引(相对于所选选项)
- 下拉选项依赖于另一个下拉选项(所有值都来自数据库)
- 在按钮上单击弹出窗口并打开一个新选项卡窗口并在 JavaScript 中专注于它
- Javascript函数,用于记住用户在其先前的访问权限中从一组下拉菜单选项中选择的内容