时间戳

首页 > 解决方案 > jQuery命令放置在选择元素之后时无法创建表

jquery - jQuery命令放置在选择元素之后时无法创建表

问题描述

我是 jQuery 的新手，并构建了我修改的代码以使其在小提琴等中立即工作。

When the select changes, it is supposed to create a table but it does not do anything. 但是，如果我将<div id="myTableId">元素放在选择的顶部，<select id="mySelect" />它就可以工作。知道为什么吗？

var service_data = [{
  "role": "paul",
  "display_name": "Paul",
  "content": [{
    "name": "AAA",
    "link": "alink"
  }, {
    "name": "BBB",
    "link": "blink"
  }]
}, {
  "role": "sally",
  "display_name": "Sally",
  "content": [{
    "name": "CCC",
    "link": "clink"
  }]
}];

$(document).ready(function() {
  //replaced service with dummy service
  $.get("https://jsonplaceholder.typicode.com/todos", function(data, status) {

    var _select = $('#mySelect');

    $.each(service_data, function(val, text) {
      _select.append(
        `<option value="${val}">${text.display_name}</option>`
      );
    });
  });

  $("#mySelect").change(function() {
    let selected_index = $("#mySelect")[0].selectedIndex;
    var container = $('#myTableId');
    var table = $('<table>');

    $.each(service_data[selected_index].content, function(val, blob) {
      var tr = $('<tr>');
      tr.append('<td>' + blob.name + '</td>');
      tr.append('<td>' + blob.link + '</td>');
      table.append(tr);
    });

    container.append(table);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="mySelect" />
<br>
<div id="myTableId" />

标签： jquery

解决方案

Divs 和 selects 不是自闭合元素。就 jQuery 而言，它们可能不存在，除非浏览器尝试为您关闭它们。修复它，它可以工作。

var service_data = [{
  "role": "paul",
  "display_name": "Paul",
  "content": [{
    "name": "AAA",
    "link": "alink"
  }, {
    "name": "BBB",
    "link": "blink"
  }]
}, {
  "role": "sally",
  "display_name": "Sally",
  "content": [{
    "name": "CCC",
    "link": "clink"
  }]
}];

$(document).ready(function() {
  //replaced service with dummy service
  $.get("https://jsonplaceholder.typicode.com/todos", function(data, status) {

    var _select = $('#mySelect');

    $.each(service_data, function(val, text) {
      _select.append(
        `<option value="${val}">${text.display_name}</option>`
      );
    });
  });

  $("#mySelect").change(function() {
    let selected_index = $("#mySelect")[0].selectedIndex;
    var container = $('#myTableId');
    var table = $('<table>');

    $.each(service_data[selected_index].content, function(val, blob) {
      var tr = $('<tr>');
      tr.append('<td>' + blob.name + '</td>');
      tr.append('<td>' + blob.link + '</td>');
      table.append(tr);
    });

    container.append(table);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="mySelect"></select>
<br>
<div id="myTableId"></div>

推荐阅读