delay populating fields until both dropdowns are selected

Question

Here is my jsfiddle.

I have two dropdowns with different family relationships. When selected, they populate in some lines of text below the dropdowns. I would like to delay the population of the text until both dropdowns are selected.

function functionOne() {

  var e = document.getElementById("dropdown_1");
  var strUser = e.options[e.selectedIndex].value;
  document.getElementById('first').textContent = strUser + (strUser ? "'s" : "");
  document.getElementById('fourth').textContent = strUser;
}
functionOne()

document.getElementById("dropdown_1").onchange = functionOne;

function functionTwo() {

  var e = document.getElementById("dropdown_2");
  var strUser = e.options[e.selectedIndex].value;
  var strUser2 = e.options[e.selectedIndex].value;
  document.getElementById('second').textContent = strUser;
  document.getElementById('third').textContent = strUser2 + (strUser2 ? "'s" : "");
}
functionTwo()

document.getElementById("dropdown_2").onchange = functionTwo;

span#first,
span#second,
span#third,
span#fourth {
  min-width: 40px;
  display: inline-block;
  border-bottom: solid 1px;
  height: 18px;
  vertical-align: bottom;
}

My
<select class="text_select" id="dropdown_1" name="dropdown_1">
  <option value="">- Select -</option>
  <option value="Father">Father's</option>
  <option value="Mother">Mother's</option>
  <option value="Sister">Sister's</option>
  <option value="Brother">Brother's</option>
  <option value="Husband">Husband's</option>
  <option value="Wife">Wife's</option>
  <option value="Son">Son's</option>
  <option value="Daughter">Daughter's</option>
  <option value="Grandfather">Grandfather's</option>
  <option value="Grandmother">Grandmother's</option>
  <option value="Aunt">Aunt's</option>
  <option value="Uncle">Uncle's</option>
  <option value="Cousin">Cousin's</option>
  <option value="Father-in-Law">Father-in-Law's</option>
  <option value="Mother-in-Law">Mother-in-Law's</option>
  <option value="Sister-in-Law">Sister-in-Law's</option>
  <option value="Brother-in-Law">Brother-in-Law's</option>
  <option value="Niece">Niece's</option>
  <option value="Nephew">Nephew's</option>
  <option value="Grandson">Grandson's</option>
  <option value="Granddaughter">Granddaughter's</option>
  <option value="Great-Aunt">Great-Aunt's</option>
  <option value="Great-Uncle">Great-Uncle's</option>

</select>

<select class="text_select" id="dropdown_2" name="dropdown_2">
  <option value="">- Select -</option>
  <option value="Father">Father</option>
  <option value="Mother">Mother</option>
  <option value="Sister">Sister</option>
  <option value="Brother">Brother</option>
  <option value="Husband">Husband</option>
  <option value="Wife">Wife</option>
  <option value="Son">Son</option>
  <option value="Daughter">Daughter</option>
  <option value="Grandfather">Grandfather</option>
  <option value="Grandmother">Grandmother</option>
  <option value="Aunt">Aunt</option>
  <option value="Uncle">Uncle</option>
  <option value="Cousin">Cousin</option>
  <option value="Father-in-Law">Father-in-Law</option>
  <option value="Mother-in-Law">Mother-in-Law</option>
  <option value="Sister-in-Law">Sister-in-Law</option>
  <option value="Brother-in-Law">Brother-in-Law</option>
  <option value="Niece">Niece</option>
  <option value="Nephew">Nephew</option>
  <option value="Grandson">Grandson</option>
  <option value="Granddaughter">Granddaughter</option>
  <option value="Great-Aunt">Great-Aunt</option>
  <option value="Great-Uncle">Great-Uncle</option>
</select>

<br /><br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>

Answer 1

Select each select beforehand, and if either selectedIndex is 0, return immediately, to ensure that both must have a selectedIndex other than 0 to proceed to populate the other elements. Also, you can now combine both listener functions into one, because they now do the exact same thing:

var e1 = document.getElementById("dropdown_1");
var e2 = document.getElementById("dropdown_2");

function populate() {
  if (e1.selectedIndex === 0 || e2.selectedIndex === 0) return;

  var strUser1 = e1.options[e1.selectedIndex].value;
  document.getElementById('first').textContent = strUser1 + "'s'";
  document.getElementById('fourth').textContent = strUser1;

  var strUser2 = e2.options[e2.selectedIndex].value;
  document.getElementById('second').textContent = strUser2;
  document.getElementById('third').textContent = strUser2 + "'s'";
}

document.getElementById("dropdown_1").onchange = populate;
document.getElementById("dropdown_2").onchange = populate;

span#first,
span#second,
span#third,
span#fourth {
  min-width: 40px;
  display: inline-block;
  border-bottom: solid 1px;
  height: 18px;
  vertical-align: bottom;
}

My
<select class="text_select" id="dropdown_1" name="dropdown_1">
  <option value="">- Select -</option>
  <option value="Father">Father's</option>
  <option value="Mother">Mother's</option>
  <option value="Sister">Sister's</option>
  <option value="Brother">Brother's</option>
  <option value="Husband">Husband's</option>
  <option value="Wife">Wife's</option>
  <option value="Son">Son's</option>
  <option value="Daughter">Daughter's</option>
  <option value="Grandfather">Grandfather's</option>
  <option value="Grandmother">Grandmother's</option>
  <option value="Aunt">Aunt's</option>
  <option value="Uncle">Uncle's</option>
  <option value="Cousin">Cousin's</option>
  <option value="Father-in-Law">Father-in-Law's</option>
  <option value="Mother-in-Law">Mother-in-Law's</option>
  <option value="Sister-in-Law">Sister-in-Law's</option>
  <option value="Brother-in-Law">Brother-in-Law's</option>
  <option value="Niece">Niece's</option>
  <option value="Nephew">Nephew's</option>
  <option value="Grandson">Grandson's</option>
  <option value="Granddaughter">Granddaughter's</option>
  <option value="Great-Aunt">Great-Aunt's</option>
  <option value="Great-Uncle">Great-Uncle's</option>

</select>

<select class="text_select" id="dropdown_2" name="dropdown_2">
  <option value="">- Select -</option>
  <option value="Father">Father</option>
  <option value="Mother">Mother</option>
  <option value="Sister">Sister</option>
  <option value="Brother">Brother</option>
  <option value="Husband">Husband</option>
  <option value="Wife">Wife</option>
  <option value="Son">Son</option>
  <option value="Daughter">Daughter</option>
  <option value="Grandfather">Grandfather</option>
  <option value="Grandmother">Grandmother</option>
  <option value="Aunt">Aunt</option>
  <option value="Uncle">Uncle</option>
  <option value="Cousin">Cousin</option>
  <option value="Father-in-Law">Father-in-Law</option>
  <option value="Mother-in-Law">Mother-in-Law</option>
  <option value="Sister-in-Law">Sister-in-Law</option>
  <option value="Brother-in-Law">Brother-in-Law</option>
  <option value="Niece">Niece</option>
  <option value="Nephew">Nephew</option>
  <option value="Grandson">Grandson</option>
  <option value="Granddaughter">Granddaughter</option>
  <option value="Great-Aunt">Great-Aunt</option>
  <option value="Great-Uncle">Great-Uncle</option>
</select>

<br /><br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>