使用具体的选择选项在加载页面时(jQuery + Ajax)

huangapple go评论60阅读模式
英文:

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

问题

我使用jQuery + Ajax检索URL并根据某些选择选项确定显示。选择工作正常,但我无法设置默认值。我希望value="3"被预先选择,并在加载页面时显示相应的结果,而无需先选择选项。我该怎么做?

以下是迄今为止的我的代码:

<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="">选择:</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>
$(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 = "服务器 " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
            $('#output').html(out);
          })
          .fail(function(xhr, status, error) {
            $('#output').html('<div class="error">错误:' + xhr.status + ' - ' + error + '</div>');
          });
          $('#show_output').html('<div id="output"></div>');
        }
   });
});

JSFiddle

英文:

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=&quot;3&quot; 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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<!-- language: lang-js -->

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

<!-- end snippet -->

JSFiddle

答案1

得分: 2

看起来你正在寻找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>
英文:

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

$(document).ready(function() {
  getResult();
  $(&quot;#reportMonth&quot;).on(&#39;change&#39;, getResult);
});

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;

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

&lt;/html&gt;

<!-- end snippet -->

答案2

得分: 0

只是一些超时和调用 触发更改

$(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('&lt;div id="output"&gt;&lt;/div&gt;');
        }
   });
});
<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>
英文:

Just and some timeout and call trigger change.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

$(document).ready(function() {

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

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;form&gt;
      &lt;select id=&quot;reportMonth&quot; name=&quot;reportMonth&quot;&gt;
        &lt;option value=&quot;&quot;&gt;Select:&lt;/option&gt;
        &lt;option value=&quot;0&quot;&gt;1&lt;/option&gt;
        &lt;option value=&quot;1&quot;&gt;2&lt;/option&gt;
        &lt;option value=&quot;2&quot;&gt;3&lt;/option&gt;
        &lt;option value=&quot;3&quot; selected=&quot;selected&quot;&gt;4&lt;/option&gt;
      &lt;/select&gt;
    &lt;/form&gt;
    &lt;div id=&quot;show_output&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月19日 00:12:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/75494630.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定