根据上一个选项自动选择 HTML 隐藏选项值答案

【问题标题】：Autoselect HTML hidden option value based on previous option根据上一个选项自动选择 HTML 隐藏选项值
【发布时间】：2017-03-25 19:23:31
【问题描述】：

我有 2 个带有相同选项的选择标签，男性和女性。 select 之一，“年龄”被隐藏。

<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实现？

【问题讨论】：

this 会做到的。
如何把它放到我的情况下？抱歉，我对 javascript 的了解有限。

标签： javascript html

【解决方案1】：

您可以将事件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>

【讨论】：

【解决方案2】：

这是一个使用 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>

【讨论】：