页面加载时用jQuery+Ajax默认选中指定select选项并展示结果

修改后的完整代码 #

HTML 代码

<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>

JavaScript 代码

$(document).ready(function() {
    // 封装Ajax请求逻辑为独立函数
    function loadServerInfo(reportMonth) {
        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>");
          });
          // 确保output容器存在，避免重复创建
          if (!$('#output').length) {
            $('#show_output').html('<div id="output"></div>');
          }
        }
    }

    // 监听select的change事件
    $("#reportMonth").on('change', function() {
        var reportMonth = $(this).val();
        loadServerInfo(reportMonth);
    });

    // 页面加载时设置默认选中项并触发请求
    const defaultVal = "3";
    $("#reportMonth").val(defaultVal);
    loadServerInfo(defaultVal);
});

关键改动说明 #

• 封装请求逻辑：把原本写在change事件里的Ajax代码抽成独立函数，避免重复编写请求代码，同时让逻辑更清晰。
• 设置默认选中：页面初始化时，通过$("#reportMonth").val("3")直接将select的选中值设为3，对应显示选项“4”。
• 自动触发请求：直接调用封装好的请求函数，不需要手动触发change事件，更高效直接。
• 优化容器判断：添加容器存在性检查，避免每次请求都重复创建output节点。

另外，也可以直接在HTML的对应option标签里添加selected属性来设置默认选中，写法如下，适合静态固定默认值的场景：

<option value="3" selected>4</option>

内容的提问来源于stack exchange，提问作者Paeddy