如何將相同的選項附加到多個選擇下拉框？

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數據的每一行，並從中制作了Table Row。 由於我們需要每個Select的字段，因此我們每次遍歷字段數據，創建新的<option>元素。 如果JSON數據中已經存在匹配項，我們還可以設置每個屬性的selected屬性。

我包括一個data-col-id ，以防您需要使用該索引和列名進行映射。

希望這可以幫助。