Display Optgroup Label as Initial Option

Display optgroup label as initial option

You can use a standard option element and simply specify the disabled attribute:

<select>
  <option disabled="disabled" selected="selected">Select Price</option>
  <optgroup label="Gold">
    <option>5.00</option>
    <option>10.00</option>
  </optgroup>
</select>

Show the selected option with group label in optgroup

Add the values what ever you want to show. As below i have done.

<select id='grp_option'>
  <optgroup label="Group 1">
    <option value='Group 1 - Option 1.1'>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option value='Group 2 - Option 2.1'>Option 2.1</option>
    <option value='Group 2 - Option 2.2'>Option 2.2</option>
  </optgroup>
</select>

Then just add this script. Here you go

$('#grp_option option').each(function () {
     $(this).data('txt', $(this).text());
});

$('#grp_option').change(function () {
 $('option', this).each(function () {
    $(this).text($(this).data('txt'));
 });

 $(this).find('option:selected').text($(this).find('option:selected').attr('value'));
});

Its done.

How to select all options within an optgroup?

Use the attribute selector:

'[attribute name = "value"]'

const groupA = document.querySelector('[label="A"]');

/* 
Using .querySelectorAll() to collect all of optgroup A options into a NodeList
*/
const groupA = document.querySelector('[label="A"]');

const allOptA = groupA.querySelectorAll('option');

allOptA.forEach(opt => opt.style.color = 'tomato')

/*
Using .children and spead operator [...x] to get all options from optgroup B 
into an Array
*/
const groupB = document.querySelector('[label="B"]');

const allOptB = groupB.children;

[...allOptB].forEach(opt => opt.style.color = 'lime');

// Gather all optgroups into an Array
const allGroups = [...document.querySelectorAll('optgroup')];

// Gather each optgroups' options into a sub-array
const allOpts = allGroups.flatMap(grp => [grp.querySelectorAll('option')]);

// Get the value of the first optgroup  third option
console.log(allOpts[0][2].value);

<select>
  <optgroup label='A'>
    <option value='0'>0</option>
    <option value='2'>2</option>
    <option value='4'>4</option>
  </optgroup>
  <optgroup label='B'>
    <option value='1'>1</option>
    <option value='3'>3</option>
    <option value='5'>5</option>
  </optgroup>
</select>

How do I show a hidden optgroup using Javascript?

Use the boolean hidden property of DOM elements to show and hide them. hidden is not the same as visible (oddly enough).

Try:

document.getElementById("SaipanVillage").hidden = false;

How to show the optgroup value + option value as the selection

if you need the selected value back to its original value... try this...
http://jsfiddle.net/kasperfish/sxvW2/2/

$('select').change(function () {
    var opt = $(this).find(':selected');
    var sel = opt.text();
    var og = opt.closest('optgroup').attr('label');
    //alert(sel);
    //alert(og);

    $(this).blur().find(':selected').text(sel + '-' + og);

});

$('select').focus(function () {
    $(this).find('option').each(function(){
        console.log($(this).text());
        t=$(this).text().split('-');
        $(this).text(t[0]);

    });

});

UPDATE
using the select2 plugin you can do the following
http://jsfiddle.net/kasperfish/bJxFR/4/

function format(item) {
       opt = $('select').find(':selected');
       sel = opt.text();
       og = opt.closest('optgroup').attr('label');
      return item.text+'-'+og;

}
$("select").select2({
formatSelection: format,
escapeMarkup: function(m) { return m; }
});

How to show optgroup label+value in jQuery select2

Use templateSelection

And this is working example based on your code

function formatState (item) {
  opt = $(item.element);
  og = opt.closest('optgroup').attr('label');
  return og+' | '+item.text;
};

$('#example').select2({
  placeholder: 'Select a Category',
  templateSelection: formatState
});

jsfiddle : https://jsfiddle.net/synz/t2zqjdf0/

resource : https://select2.org/selections#templating

Display Optgroup Label as Initial Option