Autoselect HTML hidden option value based on previous option

Question

I have 2 select tags which come with the same option, male and female. One of the select, "age" is hidden.

<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>

When user select "male" in "gender", I wish the "age" will automatically select "male" as well. I expect the same thing as "female". How to achieve this through javascript?

[this](http://stackoverflow.com/questions/78932/how-do-i-programmatically-set-the-value-of-a-select-box-element-using-javascript) would do it. — Kevin Kloet, Nov 11 '16 at 14:32
How to put it to my case? Sorry, I have limited knowledge in javascript. — user2872856, Nov 11 '16 at 14:34

Yosvel Quintero · Accepted Answer · 2016-11-11T14:58:34.823

You can attach an event change to your select gender and set the value of age on every change.

Note that both elements should be loaded with a default selected value for case that the end user do not select nothing and also check that it is better to move inline styling style="display:none;" to a separated css file.

Code:

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>

score 0 · Answer 2 · answered Nov 11 '16 at 14:58

Here's an option using 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>

Autoselect HTML hidden option value based on previous option

2 Answers2