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",
    ],
  };

  functionpopulateLocation(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();
  });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selecttype="button"id="country"name="country"placeholder="Phantasyland"><optionvalue="Market"selected="selected">
    MARKETPLACE - Disruptive Growth
  </option><optionvalue="Workplace">WORKPLACE - Foundations</option><optionvalue="PC">PEOPLE & CULTURE - Business Leadership</option></select><divclass="tooltips"title="Please select the city that the customer is primarily to be served from."><selectid="location"name="location"placeholder="Anycity"></select></div>