javascript - 如何将相同的选项附加到多个选择下拉框？

Question

我试图将相同的选项添加到列出的每个下拉框中，但这些选项仅添加到第一个下拉列表中。

function loadIgorMap() {
    $.getJSON('./iGorMap.json', function (data) {
        theData = data;
        for (var i = 0; i < data.length; i++) {
            $('.tableBody').append(`<tr>
                <td>${data[i].FiduciaryOutsourcingField}</td>
                <td>
                    <select class="browser-default custom-select" id="dropdown">
                        <option value="NA" class="N/A" hidden> -- Select --</option>
                    </select>
                </td>`)

        }
    })
}

window.onload = function () {


            for (let j = 0; j < theData.length; j++) {

                console.log('I am here')
                console.log(theData)

                let option;
                for (let i = 0; i < jsonKeys.length; i++) {
                    option = document.createElement('option');
                    option.text = jsonKeys[i];
                    // console.log(jsonKeys[i])
                    // option.value = jsonKeys[i].abbreviation;
                    dropdown.add(option);




                }
            }
        };

这应该为页面上的所有选择框显示相同的选项。 这是 repl.it 上实时页面的链接 https://repl.it/@MattEubanks/Vanilla-Mapping-Tool 。我添加了一个 CSV，您应该能够将其保存在 Excel 文件中，然后加载到系统中。

Answer 1

我花了一点时间才明白你想做什么。您似乎计划导入 CSV 文件并读取标题行。然后，您希望能够在应用程序中映射列标题。

考虑以下代码。我填充了变量，假设所有数据已从 CSV 和 JSON 导入/

$(function() {
  // Field Data read in from CSV
  var fields = ["First Name", "Middle Name", "Last Name", "Suffix", "Address 1", "Address 2", "City", "State", "Zip Code", , , , , , , , , , , , ];
  // JSON Data for selections
  var myData = [{
      "FiduciaryOutsourcingField": "EIN",
      "YourField": ""
    },
    {
      "FiduciaryOutsourcingField": "Location",
      "YourField": ""
    },
    {
      "FiduciaryOutsourcingField": "TaxId",
      "YourField": ""
    },
    {
      "FiduciaryOutsourcingField": "FirstName",
      "YourField": "First Name"
    },
    {
      "FiduciaryOutsourcingField": "MiddleName",
      "YourField": "Middle Name"
    },
    {
      "FiduciaryOutsourcingField": "LastName",
      "YourField": "Last Name"
    }
  ];

  function readData(dObj, tObj) {
    $.each(dObj, function(key, row) {
      var newRow = $("<tr>").appendTo(tObj);
      var f1 = $("<td>").html(row.FiduciaryOutsourcingField).appendTo(newRow);
      var f2 = $("<td>").appendTo(newRow);
      var s1 = $("<select>").appendTo(f2);
      $("<option>").html("-- Select --").appendTo(s1);
      $.each(fields, function(i, v) {
        $("<option>", {
          selected: (row.YourField == v ? true : false),
          "data-col-it": i
        }).html((v != undefined ? v : "(Col-" + i + ")")).appendTo(s1);
      });
    });
  }

  readData(myData, $(".tableBody"));
});

.tableHeader {
  width: 300px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container col-md-">
  <div>
    <table class="table table-bordered table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Fiduciary Outsourcing Field</th>
          <th scope="col">Your Fields</th>
        </tr>
      </thead>
      <tbody class="tableBody"></tbody>
    </table>
  </div>
</div>

如您所见，我迭代每行 JSON 数据并从中创建表行。由于我们需要每个 Select 的字段，因此我们每次遍历字段数据，创建新的 <option>元素。我们还可以设置selected如果 JSON 数据中已存在匹配项，则为每个属性。

我添加了 data-col-id如果您需要使用该索引与列名进行映射。

希望这有帮助。