javascript 加载页面时使用特定的选择选项(jQuery + AJAX )

u2nhd7ah 于 2023-02-21 发布在 Java

关注(0)|答案(2)|浏览(121)

我使用jQuery + Ajax检索URL，并根据某些选择选项确定显示。选择工作正常，但我无法放置默认值。我希望预先选择value="3"，并在加载页面时显示相应的结果，而无需之前选择选项。我该如何做？
下面是我的代码：

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

JavaScript

来源：https://stackoverflow.com/questions/75494630/use-specific-select-option-when-loading-the-page-jquery-ajax

2条答案

按热度按时间

sr4lhrrt1#

看起来你要找的是selected属性，你还需要运行AJAX代码来获取默认值的结果，所以把你的onchange处理程序提取到一个函数中，然后在onready处理程序中调用它，如下所示：

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>

赞(0）回复(0）举报 2023-02-21

1u4esq0p2#

只是暂停一下，然后调用trigger change。

$(document).ready(function() {

    setTimeout(function() {
       $("#reportMonth").trigger('change'); 
    });
    $("#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" selected="selected">4</option>
      </select>
    </form>
    <div id="show_output"></div>
  </body>
</html>

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 加载页面时使用特定的选择选项(jQuery + AJAX )

2条答案

相关问题

热门标签

最新问答