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

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

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

问题

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

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

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <form>
  6. <select id="reportMonth" name="reportMonth">
  7. <option value="">选择:</option>
  8. <option value="0">1</option>
  9. <option value="1">2</option>
  10. <option value="2">3</option>
  11. <option value="3">4</option>
  12. </select>
  13. </form>
  14. <div id="show_output"></div>
  15. </body>
  16. </html>
  1. $(document).ready(function() {
  2. $("#reportMonth").on('change', function() {
  3. var reportMonth = $('#reportMonth :selected').val();
  4. if(reportMonth){
  5. $.ajax({
  6. type: "GET",
  7. url: "https://api.tools.paeddy.de/server_info",
  8. dataType: "json",
  9. timeout: 15000,
  10. })
  11. .done(function(JSONOut) {
  12. var out = "服务器 " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
  13. $('#output').html(out);
  14. })
  15. .fail(function(xhr, status, error) {
  16. $('#output').html('<div class="error">错误:' + xhr.status + ' - ' + error + '</div>');
  17. });
  18. $('#show_output').html('<div id="output"></div>');
  19. }
  20. });
  21. });

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;!DOCTYPE html&gt;
  3. &lt;html&gt;
  4. &lt;body&gt;
  5. &lt;form&gt;
  6. &lt;select id=&quot;reportMonth&quot; name=&quot;reportMonth&quot;&gt;
  7. &lt;option value=&quot;&quot;&gt;Select:&lt;/option&gt;
  8. &lt;option value=&quot;0&quot;&gt;1&lt;/option&gt;
  9. &lt;option value=&quot;1&quot;&gt;2&lt;/option&gt;
  10. &lt;option value=&quot;2&quot;&gt;3&lt;/option&gt;
  11. &lt;option value=&quot;3&quot;&gt;4&lt;/option&gt;
  12. &lt;/select&gt;
  13. &lt;/form&gt;
  14. &lt;div id=&quot;show_output&quot;&gt;&lt;/div&gt;
  15. &lt;/body&gt;
  16. &lt;/html&gt;

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

  1. $(document).ready(function() {
  2. $(&quot;#reportMonth&quot;).on(&#39;change&#39;, function() {
  3. var reportMonth = $(&#39;#reportMonth :selected&#39;).val();
  4. if(reportMonth){
  5. $.ajax({
  6. type: &quot;GET&quot;,
  7. url: &quot;https://api.tools.paeddy.de/server_info&quot;,
  8. dataType: &quot;json&quot;,
  9. timeout: 15000,
  10. })
  11. .done(function(JSONOut) {
  12. var out = &quot;Server &quot; + JSONOut[reportMonth].server + &quot; = &quot; + JSONOut[reportMonth].status;
  13. $(&#39;#output&#39;).html(out);
  14. })
  15. .fail(function(xhr, status, error) {
  16. $(&#39;#output&#39;).html(&quot;&lt;div class=&#39;error&#39;&gt;Error: &quot; + xhr.status + &#39; - &#39; + error + &quot;&lt;/div&gt;&quot;);
  17. });
  18. $(&#39;#show_output&#39;).html(&#39;&lt;div id=&quot;output&quot;&gt;&lt;/div&gt;&#39;);
  19. }
  20. });
  21. });

<!-- end snippet -->

JSFiddle

答案1

得分: 2

看起来你正在寻找selected属性。你还需要运行AJAX代码来获取默认值的结果,所以将你的onchange处理程序提取到一个函数中,然后在onready处理程序内调用它。就像这样:

  1. function getResult() {
  2. var reportMonth = $('#reportMonth :selected').val();
  3. if (reportMonth) {
  4. $.ajax({
  5. type: "GET",
  6. url: "https://api.tools.paeddy.de/server_info",
  7. dataType: "json",
  8. timeout: 15000,
  9. })
  10. .done(function(JSONOut) {
  11. var out = "Server " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
  12. $('#output').html(out);
  13. })
  14. .fail(function(xhr, status, error) {
  15. $('#output').html('<div class="error">Error: ' + xhr.status + ' - ' + error + '</div>');
  16. });
  17. $('#show_output').html('<div id="output"></div>');
  18. }
  19. }
  20. $(document).ready(function() {
  21. getResult();
  22. $("#reportMonth").on('change', getResult);
  23. });
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <form>
  5. <select id="reportMonth" name="reportMonth">
  6. <option value="">Select:</option>
  7. <option value="0">1</option>
  8. <option value="1">2</option>
  9. <option value="2">3</option>
  10. <option value="3" selected>4</option>
  11. </select>
  12. </form>
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  14. <div id="show_output"></div>
  15. </body>
  16. </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 -->

  1. function getResult() {
  2. var reportMonth = $(&#39;#reportMonth :selected&#39;).val();
  3. if (reportMonth) {
  4. $.ajax({
  5. type: &quot;GET&quot;,
  6. url: &quot;https://api.tools.paeddy.de/server_info&quot;,
  7. dataType: &quot;json&quot;,
  8. timeout: 15000,
  9. })
  10. .done(function(JSONOut) {
  11. var out = &quot;Server &quot; + JSONOut[reportMonth].server + &quot; = &quot; + JSONOut[reportMonth].status;
  12. $(&#39;#output&#39;).html(out);
  13. })
  14. .fail(function(xhr, status, error) {
  15. $(&#39;#output&#39;).html(&quot;&lt;div class=&#39;error&#39;&gt;Error: &quot; + xhr.status + &#39; - &#39; + error + &quot;&lt;/div&gt;&quot;);
  16. });
  17. $(&#39;#show_output&#39;).html(&#39;&lt;div id=&quot;output&quot;&gt;&lt;/div&gt;&#39;);
  18. }
  19. }
  20. $(document).ready(function() {
  21. getResult();
  22. $(&quot;#reportMonth&quot;).on(&#39;change&#39;, getResult);
  23. });

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

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;body&gt;
  4. &lt;form&gt;
  5. &lt;select id=&quot;reportMonth&quot; name=&quot;reportMonth&quot;&gt;
  6. &lt;option value=&quot;&quot;&gt;Select:&lt;/option&gt;
  7. &lt;option value=&quot;0&quot;&gt;1&lt;/option&gt;
  8. &lt;option value=&quot;1&quot;&gt;2&lt;/option&gt;
  9. &lt;option value=&quot;2&quot;&gt;3&lt;/option&gt;
  10. &lt;option value=&quot;3&quot; selected&gt;4&lt;/option&gt;
  11. &lt;/select&gt;
  12. &lt;/form&gt;
  13. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  14. &lt;div id=&quot;show_output&quot;&gt;&lt;/div&gt;
  15. &lt;/body&gt;
  16. &lt;/html&gt;

<!-- end snippet -->

答案2

得分: 0

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

  1. $(document).ready(function() {
  2. setTimeout(function() {
  3. $("#reportMonth").trigger('change');
  4. });
  5. $("#reportMonth").on('change', function() {
  6. var reportMonth = $('#reportMonth :selected').val();
  7. if(reportMonth){
  8. $.ajax({
  9. type: "GET",
  10. url: "https://api.tools.paeddy.de/server_info",
  11. dataType: "json",
  12. timeout: 15000,
  13. })
  14. .done(function(JSONOut) {
  15. var out = "Server " + JSONOut[reportMonth].server + " = " + JSONOut[reportMonth].status;
  16. $('#output').html(out);
  17. })
  18. .fail(function(xhr, status, error) {
  19. $('#output').html('<div class="error">Error: ' + xhr.status + ' - ' + error + '</div>');
  20. });
  21. $('#show_output').html('&lt;div id="output"&gt;&lt;/div&gt;');
  22. }
  23. });
  24. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <form>
  6. <select id="reportMonth" name="reportMonth">
  7. <option value="">Select:</option>
  8. <option value="0">1</option>
  9. <option value="1">2</option>
  10. <option value="2">3</option>
  11. <option value="3" selected="selected">4</option>
  12. </select>
  13. </form>
  14. <div id="show_output"></div>
  15. </body>
  16. </html>
英文:

Just and some timeout and call trigger change.

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

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

  1. $(document).ready(function() {
  2. setTimeout(function() {
  3. $(&quot;#reportMonth&quot;).trigger(&#39;change&#39;);
  4. });
  5. $(&quot;#reportMonth&quot;).on(&#39;change&#39;, function() {
  6. var reportMonth = $(&#39;#reportMonth :selected&#39;).val();
  7. if(reportMonth){
  8. $.ajax({
  9. type: &quot;GET&quot;,
  10. url: &quot;https://api.tools.paeddy.de/server_info&quot;,
  11. dataType: &quot;json&quot;,
  12. timeout: 15000,
  13. })
  14. .done(function(JSONOut) {
  15. var out = &quot;Server &quot; + JSONOut[reportMonth].server + &quot; = &quot; + JSONOut[reportMonth].status;
  16. $(&#39;#output&#39;).html(out);
  17. })
  18. .fail(function(xhr, status, error) {
  19. $(&#39;#output&#39;).html(&quot;&lt;div class=&#39;error&#39;&gt;Error: &quot; + xhr.status + &#39; - &#39; + error + &quot;&lt;/div&gt;&quot;);
  20. });
  21. $(&#39;#show_output&#39;).html(&#39;&lt;div id=&quot;output&quot;&gt;&lt;/div&gt;&#39;);
  22. }
  23. });
  24. });

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;!DOCTYPE html&gt;
  3. &lt;html&gt;
  4. &lt;body&gt;
  5. &lt;form&gt;
  6. &lt;select id=&quot;reportMonth&quot; name=&quot;reportMonth&quot;&gt;
  7. &lt;option value=&quot;&quot;&gt;Select:&lt;/option&gt;
  8. &lt;option value=&quot;0&quot;&gt;1&lt;/option&gt;
  9. &lt;option value=&quot;1&quot;&gt;2&lt;/option&gt;
  10. &lt;option value=&quot;2&quot;&gt;3&lt;/option&gt;
  11. &lt;option value=&quot;3&quot; selected=&quot;selected&quot;&gt;4&lt;/option&gt;
  12. &lt;/select&gt;
  13. &lt;/form&gt;
  14. &lt;div id=&quot;show_output&quot;&gt;&lt;/div&gt;
  15. &lt;/body&gt;
  16. &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:

确定