JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<select id="customer">
    <option value="">Select customer</option>
    <option value="1">ID: 1</option>
    <option value="2">ID: 2</option>
    <option value="3">ID: 3</option>
</select>
<select id="contact">
    <option value="">Select one</option>
</select>

JavaScript

var data = [[{
    "id": "1",
        "name": "Tom1"
}, {
    "id": "2",
        "name": "Fred1"
}, {
    "id": "3",
        "name": "Same1"
}], [{
    "id": "1",
        "name": "Tom2"
}, {
    "id": "2",
        "name": "Fred2"
}, {
    "id": "3",
        "name": "Same2"
}],[{
    "id": "1",
        "name": "Tom3"
}, {
    "id": "2",
        "name": "Fred3"
}, {
    "id": "3",
        "name": "Same3"
}]];
$("#customer").change(function () {
    var cid = $("#customer").val();
    var options = [];
    $.each(data[cid - 1], function () {
        options.push('<option value="' + this.id + '">' + this.name + '</option>');
    });
    $("#contact").html(options.join(""));
});