Initialize A Children Button When Using A Cascade Dropdown Menu Via Javascript

I have set up a dropdown menu cascade (children: location and parent: country) and I would like the children and parent to be initialized at the first default value coming when lan

Solution 1:

You can actually just do the same thing that is done in the onchange of #country on initialisation. Refer the below code. I've just moved it to a re-usable method.

jQuery(function($) {
  var locations = {
    Market: [
      "1. Activate Priority Destinations",
      "2. Drive Growth through Trade Partnerships",
      "3. Lead the travel ecosystem to own Arabia",
      "4. Create a welcoming and frictionless experience",
    ],
    Workplace: [
      "5. Empower STA with evidence-based decision making",
      "6. Organize High-Performance organization for STA",
    ],
    PC: [
      "7. Enable STArs success, growth and wellbeing",
      "8. Foster & embrace our core values",
    ],
  };

  function populateLocation(country) {
    var lcns = locations[country] || [];

    var html = $.map(lcns, function(lcn) {
      return '<option value="' + lcn + '">' + lcn + "</option>";
    }).join("");

    var $locations = $("#location");

    $locations.html(html);
  };
  
  populateLocation($("#country").val());

  $("#country").change(function() {
    var country = $(this).val();
    populateLocation(country);
  });
});


$(document).ready(function() {
  $(".group").hide();
  $("#Market").show();
  $("#country").change(function() {
    $(".group").hide();
    $("#" + $(this).val()).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="button" id="country" name="country" placeholder="Phantasyland">
  <option value="Market" selected="selected">
    MARKETPLACE - Disruptive Growth
  </option>
  <option value="Workplace">WORKPLACE - Foundations</option>
  <option value="PC">PEOPLE & CULTURE - Business Leadership</option>
</select>

<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
  <select id="location" name="location" placeholder="Anycity"></select>
</div>