Get combo box selected value from JavaScript

Question

I'm creating a web form using the bootstrap wizard.

Here I'm stuck within a few operations.

As a first step, I have added a drop-down menu and there in the selected event, I'm taking the selected value from the javascript. That's working fine.

So in the next section, there is another combo box and the selection change event I also want to get the selected value of that combo box and the previously selected combo box value.

So I did this method but it does not return the selected value.

Can you help me with this?. Still, I'm not good with javascript

This is the first combo box.

 <div class="form-row center">
   <div class="form-holder"> @Html.DropDownListFor(model => model.Language, new SelectList(new[] { "English", "සිංහල", "தமிழ்" }),"Please Select the Language", new { @class = "form-control js-dropdown",Id ="DropLanguage" }) </div>
 </div>

This is the second Combo box

<div class="form-holder w-100">
  <div class="col-md-12"> @Html.DropDownList("ServiceTypeId", null,language == "Secondary" ? "For which service you came for?" : language == "Primary" ? "ඔබ පැමිණියේ කුමන සේවාව සඳහාද?" : language == "Third" ? "நீங்கள் எந்த சேவைக்காக வந்தீர்கள்" : "", htmlAttributes: new { @class = "form-control", Id = "ServiceType" }) <i class="zmdi zmdi-quote"></i> @Html.ValidationMessageFor(model => model.ServiceTypeId, "", new { @class = "text-danger" }) </div>
</div>

This is the javascript

< script type = "text/javascript" >
  $(document).ready(function () {
    $("#DropLanguage").on("change", function () {
      // This is the jQuery way of finding selected option's text
      var myVar = $(this).find("option:selected").text();

      // Post the value to your server. You should do some error handling here
      $.ajax({
        url: '/MainDetails/SetSession',
        type: 'POST',
        dataType: 'json',
        cache: false,
        async: false,
        data: {
          myVariable: myVar
        },
        success: function (data) {
          if (data.Success == true) {

            $("#mydiv").load(window.location.href + " #mydiv");
          }
        }
      });

    });

    $("#ServiceType").on("change", function () {

      var ServiceId = document.getElementById("ServiceType");
      var Language = document.getElementById("DropLanguage");

      alert(ServiceId);
      alert(Language);

    });
  });

<
/script>

Im not getting value on this section $("#ServiceType").on("change", function () {