Use specific select option when loading the page (jQuery + Ajax)

I retrieve a URL with jQuery + Ajax and determine the display based on certain select options. The selection works fine, however I can't manage to place a default. I would like value="3" to be preselected and show the corresponding result already when loading the page, without having selected an option before. How can I do this?

Here is my code so far:

$(document).ready(function() {
    $("#reportMonth").on('change', function() {
        var reportMonth = $('#reportMonth :selected').val();
        if(reportMonth){
          $.ajax({
            type: "GET",
            url: "https://api.tools.paeddy.de/server_info",
            dataType: "json",
            timeout: 15000,
          })
          .done(function(JSONOut) {
            var out = "Server " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
            $('#output').html(out);
          })
          .fail(function(xhr, status, error) {
            $('#output').html("<div class='error'>Error: " + xhr.status + ' - ' + error + "</div>");
          });
          $('#show_output').html('<div id="output"></div>');
        }
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <body>
    <form>
      <select id="reportMonth" name="reportMonth">
        <option value="">Select:</option>
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
        <option value="3">4</option>
      </select>
    </form>
    <div id="show_output"></div>
  </body>
</html>

JSFiddle

Solution

It looks like you're looking for the selected attribute. You'll also need to run the AJAX code to fetch the result for the default value, so extract your onchange handler into a function, then call it inside the onready handler. Like this:

function getResult() {
  var reportMonth = $('#reportMonth :selected').val();
  if (reportMonth) {
    $.ajax({
        type: "GET",
        url: "https://api.tools.paeddy.de/server_info",
        dataType: "json",
        timeout: 15000,
      })
      .done(function(JSONOut) {
        var out = "Server " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
        $('#output').html(out);
      })
      .fail(function(xhr, status, error) {
        $('#output').html("<div class='error'>Error: " + xhr.status + ' - ' + error + "</div>");
      });
    $('#show_output').html('<div id="output"></div>');
  }
}

$(document).ready(function() {
  getResult();
  $("#reportMonth").on('change', getResult);
});

<!DOCTYPE html>
<html>

<body>
  <form>
    <select id="reportMonth" name="reportMonth">
      <option value="">Select:</option>
      <option value="0">1</option>
      <option value="1">2</option>
      <option value="2">3</option>
      <option value="3" selected>4</option>
    </select>
  </form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="show_output"></div>
</body>

</html>