Hi avair1300,
Please refer below sample.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="ddlCountries"></select>
<script type="text/javascript">
window.onload = function () {
var res = [];
res.push({
County: {},
Infor: {},
CountyState: { 'ID': '1', 'Country': 'India', 'State': 'AP' }
});
res.push({
County: {},
Infor: {},
CountyState: { 'ID': '2', 'Country': 'India', 'State': 'Telanagana' }
});
res.push({
County: {},
Infor: {},
CountyState: { 'ID': '3', 'Country': 'India', 'State': 'UP' }
});
res.push({
County: {},
Infor: {},
CountyState: { 'ID': '4', 'Country': 'India', 'State': 'MP' }
});
res.push({
County: {},
Infor: {},
CountyState: { 'ID': '5', 'Country': 'US', 'State': 'Newyork' }
});
res.push({
County: {},
Infor: {},
CountyState: { 'ID': '5', 'Country': 'US', 'State': 'Albama' }
});
res.push({
County: {},
Infor: {},
CountyState: { 'ID': '5', 'Country': 'US', 'State': 'Texas' }
});
// Get the dropdown element by its ID.
var ddlCountries = document.getElementById("ddlCountries");
// Clear existing options.
ddlCountries.innerHTML = "";
var countyStates = [];
for (var i = 0; i < res.length; i++) {
countyStates.push(res[i].CountyState);
}
// Return CountyStates.
var result = countyStates.map(function (obj) { return obj.Country; });
result = result.filter(function (v, i) { return result.indexOf(v) == i; });
// Loop through the countries and create option elements.
for (var i = 0; i < result.length; i++) {
var option = document.createElement("option");
option.text = result[i];
ddlCountries.appendChild(option);
}
};
</script>
</body>
</html>
Demo
