Не можете получить выбранную группу?

Question

 <select class="" id="buyCountriesSel"></select>

загрузите его с помощью:

  $('#buyCountriesSel').append($('<optgroup id="abc" label="USA">'));
    for (var key in statesCodesUS)  $('#buyCountriesSel').append($('<option></option>').val(key).text(statesCodesUS[key]) );
    $('#buyCountriesSel').append($('</optgroup>'));

прочтите с помощью:

   $('#buyCountriesSel').on('change', function() {
     var selected = $( "#buyCountriesSel option:selected" );
       var area = selected.closest('optgroup').attr("id"); // .parent() also not work
       alert(area);
   });

Ожидается получение USA . Это даст мне объект buyCountriesSel, а не группу с label="USA"

Использование parent() вместо closest также не работает, попытка проверить .label также даст undefined.

Answer 1

append() не объединяет HTML фрагменты, а создает элементы DOM. Вам нужно добавить параметры в optgroup, а не в select.

var usa_group = $('<optgroup id="abc" label="USA">');
for (var key in statesCodesUS) {
  usa_group.append($('<option></option>', {
    value: key,
    text: statesCodesUS[key]
  }));
}
$('#buyCountriesSel').append(usa_group);

<select class="" id="buyCountriesSel"></select>