Auto Selecting a Value from Dropdown on Selection of Specific Value from Another Dropdown

var gender1 = document.querySelector("#gender1");
var gender2 = document.querySelector("#gender2");

gender1.addEventListener("change", function() {
  var value = gender1.value;
  switch (value) {

    case "Boy":
      gender2.value = "Tipu";
      break;

    case "Girl":
      gender2.value = "Ayubi";
      break;

  }
})

<select class="input_select" name="student_gender" id="gender1">
  <option value="Boy" '.$selected_boy.'>Boy</option>
  <option value="Girl" '.$selected_girl.'>Girl</option>
</select>

<select class="input_select" name="student_class_section" id="gender2">
  <option value="Tipu" '.$selected_boy.'>Tipu (Boy)</option>
  <option value="Ayubi" '.$selected_girl.'>Ayubi (Girl)</option>
</select>