Select option does not set the selected value from a response - node.js

Question

i have 2 select dropdowns which i'm populating with values from a server. i can retrieve the values and populate the options of the select dropdown with no problems, however, when i try to set one of the values of the second select dropdown as the selected value, it does not display.
here's my code:
$.ajax({
type: "GET",
url: "/someUrl",
data: { nameType: 'Shop', item: itemName},
success: function (data)
{
$.each(data, function (i, obj) {
var div_data = "<option>" + obj.Shop + "</option>";
$(div_data).appendTo('#shop_name');
});
$.ajax
({
url: '/get_shop_item',
type: 'POST',
data: { shop_id: shop_id },
success: function (response)
{
$('#area_name option').filter(function() {
return this.text == response.result[0].area;
}).attr('selected', true);
$('#shop_name option').filter(function() {
return this.text == response.result[0].name;
}).attr('selected', true);
}
});
}
});

Answer 1

The code you posted only populates one select element #shop_name
I would probably set the name property on the options then you don't have to use filter and go through all options.
Try this
$.ajax({
type: "GET",
url: "/someUrl",
data: { nameType: 'Shop', item: itemName},
success: function (data) {
$.each(data, function (i, obj) {
var div_data = '<option name="' + obj.Shop + '">' + obj.Shop + '</option>';
$(div_data).appendTo('#shop_name');
// append to #area_name as well
});
$.ajax({
url: '/get_shop_item',
type: 'POST',
data: { shop_id: shop_id },
success: function (response) {
$('#area_name option[name="' + response.result[0].area + '"]').attr('selected', true);
$('#shop_name option[name="' + response.result[0].name + '"]').attr('selected', true);
}
});
}
});