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

February 18, 2023

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>