JSFiddle - React, Tailwind, and code Playground

by Rohan Kumar

HTML

<select id="name"></select>
<select id="email"></select>
<select id="sms"></select>

JavaScript

var json = {
    "Result": {
        "tags": [{
            "name": "ABC",
            "email": "[email protected]",
            "sms": 123
        }, {
            "name": "ABC",
            "email": "[email protected]",
            "sms": 456
        }, {
            "name": "ABC",
            "email":
                "[email protected]",
            "sms": 789
        }, {
            "name": "XYZ",
            "email": "[email protected]",
            "sms": 976
        }, {
            "name": "XYZ",
            "email": "[email protected]",
            "sms": 543
        }]
    }
};

var name = [],
    email = [];
sms = [];
var obj = {};
$(json.Result.tags).each(function (k, v) {
    name[k] = (v.name);
    obj[k] = {
        name: v.name,
        email: v.email,
        sms: v.sms
    };
});
$($.unique(name)).each(function (i, v) {
    $('#name').append('<option value="' + v + '">' + v + '</option>');
});
$('#name').on('change', function () {
    var $that = $(this);
    $('#email').html('');
    $('#sms').html('');
    $.each(obj,function (i, v) {
        if( $that.val() == v.name) {
            $('#email').append('<option value="' + v.email + '">' + v.email + '</option>');
            $('#sms').append('<option value="' + v.sms + '">' + v.sms + '</option>');
        }
    });
}).change();