JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<select id="mySelect"></select>

JavaScript

var myData = {
        "data": [{
            "DT_RowId": "row_2",
                "suppliers": {
                    "SupplierAcc": "BNP002",
                    "SupplierName": "BNP Paribas Leasing SolutionsLtd",
                    "SupplierAddr1": "Northern Cross",
                    "SupplierAddr2": "Basing View",
                    "SupplierAddr3": null,
                    "SupplierAddr4": null,
                    "SupplierCity": "Basingstoke",
                    "SupplierCounty": null,
                    "SupplierPCode": null,
                    "SupplierCountry": null
            }
        }, {
            "DT_RowId": "row_3",
                "suppliers": {
                    "SupplierAcc": "3663",
                    "SupplierName": "BFS Group Ltd T\/ 3663",
                    "SupplierAddr1": "Blackmoss Lane",
                    "SupplierAddr2": "Scarisbrick",
                    "SupplierAddr3": null,
                    "SupplierAddr4": null,
                    "SupplierCity": "Ormskirk",
                    "SupplierCounty": "Lancashire",
                    "SupplierPCode": "L40 9RW",
                    "SupplierCountry": "UK"
            }
        }],
            "options": []
    };

    // Iterate through the JSON object and build the options for our select
    var options = '';
    for (i = 0; i < myData.data.length; i++) {
        // Access Supplier Name using:  myData.data[i].suppliers.SupplierName
        // Access DT_RowID using:  myData.data[i].DT_RowId
        options += '<option value=' + myData.data[i].DT_RowId + '>' + myData.data[i].suppliers.SupplierName + '</option>';
    }

    $(function () {
        // Populate the select options
        $('#mySelect').html(options);
        // Demonstrate that the value has been properly set
        $('#mySelect').on('change', function () {
            alert('Selected value: ' + $(this).val());
        });
    });