javascript - jQuery中select默认值获取JSON数据

Question

需要以下代码段的帮助。当用户从 select 中选择一个选项时，API URL 会根据用户需要的适当日期进行更新。但是，我已经设置了一个默认值，无论是在 select option 中使用 selected 还是通过 jQuery 和 $('#DateSelector').val('30')。

除了 JSON 数据未在 Page Load 上加载外，每个都完全按照它们的意图进行。

如何获取此值以传递页面加载，以便默认的API URL 提供正确的数据。

$('#DateSelector').val('30')

function datePeriod() {
  let datePeriod = $("#DateSelector").val();
  $("#DateShow").html(datePeriod);
  $.getJSON(`https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=last${datePeriod}&token_auth=68aa5bd12137f13255dcb98794b65dff`, (data) => {

    //console.log(data);
    let visitors = 0;
    let uniq_visitors = 0;
    let pageviews = 0;
    let uniq_pageviews = 0;
    let actions = 0;
    let outlinks = 0;
    let bounces = 0;
    let avgtime = 0;

    for (i in data) {

      if (data[i].nb_visits) {
        visitors += data[i].nb_visits;
      }
      if (data[i].nb_uniq_visitors) {
        uniq_visitors += data[i].nb_uniq_visitors;
      }
      if (data[i].nb_pageviews) {
        pageviews += data[i].nb_pageviews;
      }
      if (data[i].nb_uniq_pageviews) {
        uniq_pageviews += data[i].nb_uniq_pageviews;
      }
      if (data[i].nb_actions) {
        actions += data[i].nb_actions;
      }
      if (data[i].nb_outlinks) {
        outlinks += data[i].nb_outlinks;
      }
      if (data[i].bounce_count) {
        bounces += data[i].bounce_count;
      }
      if (data[i].avg_time_on_site) {
        avgtime += data[i].avg_time_on_site;
      }
    }

    $("#visitors").html(visitors);
    $("#uniq_visitors").html(uniq_visitors);
    $("#pageviews").html(pageviews);
    $("#uniq_pageviews").html(uniq_pageviews);
    $("#actions").html(actions);
    $("#outlinks").html(outlinks);
    $("#bounces").html(bounces);
    $("#avgtime").html(avgtime / datePeriod);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="DateSelector" id="DateSelector" onchange="datePeriod();">
   <option value="7">Last 7 Days</option>
   <option value="14">Last 14 Days</option>
   <option selected value="30">Last 30 Days</option>
   <option value="90">Last 90 Days</option>
   <option value="365">Last 365 Days</option>
</select>


<span id="visitors"></span>
<span id="uniq_visitors"></span>
<span id="pageviews"></span>
<span id="uniq_pageviews"></span>
<span id="actions"></span>
<span id="outlinks"></span>
<span id="bounces"></span>
<span id="avgtime"></span>

已经解决了许多与 select 默认值相关的其他问题，但没有一个适合我想要实现的目标。

更新

在应用下面的答案以使用 $('#DateSelector').val('30').trigger("change") 之后，这是发生了什么的屏幕录像。

使用其他答案

$('#DateSelector').val('30')
datePeriod();

我在页面加载时将每个 object 的值设为 0

Answer 1

这应该有效。我已经在你的代码中添加了 trigger("change")

$('#DateSelector').val('30').trigger("改变")

$('#DateSelector').val('30').trigger("change")

function datePeriod() {
  let datePeriod = $("#DateSelector").val();
  $("#DateShow").html(datePeriod);
  $.getJSON(`https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=last${datePeriod}&token_auth=68aa5bd12137f13255dcb98794b65dff`, (data) => {

    //console.log(data);
    let visitors = 0;
    let uniq_visitors = 0;
    let pageviews = 0;
    let uniq_pageviews = 0;
    let actions = 0;
    let outlinks = 0;
    let bounces = 0;
    let avgtime = 0;

    for (i in data) {

      if (data[i].nb_visits) {
        visitors += data[i].nb_visits;
      }
      if (data[i].nb_uniq_visitors) {
        uniq_visitors += data[i].nb_uniq_visitors;
      }
      if (data[i].nb_pageviews) {
        pageviews += data[i].nb_pageviews;
      }
      if (data[i].nb_uniq_pageviews) {
        uniq_pageviews += data[i].nb_uniq_pageviews;
      }
      if (data[i].nb_actions) {
        actions += data[i].nb_actions;
      }
      if (data[i].nb_outlinks) {
        outlinks += data[i].nb_outlinks;
      }
      if (data[i].bounce_count) {
        bounces += data[i].bounce_count;
      }
      if (data[i].avg_time_on_site) {
        avgtime += data[i].avg_time_on_site;
      }
    }

    $("#visitors").html(visitors);
    $("#uniq_visitors").html(uniq_visitors);
    $("#pageviews").html(pageviews);
    $("#uniq_pageviews").html(uniq_pageviews);
    $("#actions").html(actions);
    $("#outlinks").html(outlinks);
    $("#bounces").html(bounces);
    $("#avgtime").html(avgtime / datePeriod);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="DateSelector" id="DateSelector" onchange="datePeriod();">
   <option value="7">Last 7 Days</option>
   <option value="14">Last 14 Days</option>
   <option selected value="30">Last 30 Days</option>
   <option value="90">Last 90 Days</option>
   <option value="365">Last 365 Days</option>
</select>


<span id="visitors"></span>
<span id="uniq_visitors"></span>
<span id="pageviews"></span>
<span id="uniq_pageviews"></span>
<span id="actions"></span>
<span id="outlinks"></span>
<span id="bounces"></span>
<span id="avgtime"></span>