Add optgroup to existing select using jquery

Profile picture for Tom
Tom

I have an existing select:

var $selectStatus = jQuery("<select id='Status' name='status'></select>");
var enabledHtml = "<option value='ENABLED'>"ON"</option>";
var disabledHtml = "<option value='DISABLED'>"OFF"</option>";
var $statusEnabled = jQuery(enabledHtml);
var $statusDisabled = jQuery(disabledHtml);
//some code to add "selected" properties
...
//finally add to select
$selectStatus.append($statusEnabled, $statusDisabled);

This produces a select with ON/OFF as the options. Now I want to add an optgroup along with some values I've got stored in an array.

So what you should get is a select something like:

<select>
    <option value="ENABLED">ON</option>
    <option value="DISABLED">OFF</option>
  <optgroup label="Info">
    <option value="some value">some value</option>
    <option value="some value">some value</option>
...
  </optgroup>
</select>

It could be an empty optgroup with no option values or any number of option values.

I tried this:

var status_optgroup_open = "<optgroup label='Info'>"
	for(i=0;i<info.length;i++) 
	{
		$foobar = jQuery('#Status').append(jQuery('<option/>').val(info[i].info_name).html(info[i].info_name));

	}
	var status_optgroup_close = "</optgroup>"

var $statusOpen = jQuery(status_optgroup_open);
var $statusClose = jQuery(status_optgroup_close);
$selectStatus.append($statusEnabled, $statusDisabled, $statusOpen, $foobar, $statusClose);

The output of info[i].info_name is what I expect but I'm just not sure how do I append them in this context. Right now this just yields an empty optgroup.

The .append() function does not merely concatenate all of the strings passed into it.

So this: $("body").append("<p>","hi","</p>") will not yield <p>hi</p>

Instead, it will take each element in the array, add them to the DOM if necessary, and add those elements to the parent. So the actual output would look like this:

<!-- language: lang-html --> 
<p></p>
"hi"
<p></p>

Instead, what you want to do, is create the optgroup and append all of the individual options to that. And then add that entire object (children and all) to the select element like this:

<!-- begin snippet: js hide: false --> <!-- language: lang-js --> 
var info = [
  {info_name: 'Some Value 1'},
  {info_name: 'Some Value 2'}
];

// create select
var $selectStatus = $("<select id='Status' name='status'>");

// create options
var enabled = "<option value='ENABLED'>ON</option>";
var disabled = "<option value='DISABLED'>OFF</option>";

// create opt group
var $optgroup = $("<optgroup label='Info'>");
for (i=0; i<info.length; i++) {
  var op = "<option value='" + info[i].info_name + "'>" + info[i].info_name + "</option>";
  $optgroup.append(op);
}

// create select
$selectStatus.append(enabled, disabled, $optgroup);

// add select to page
$("body").append($selectStatus);
<!-- language: lang-html --> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<!-- end snippet -->

Note: jQuery will automatically create DOM elements from strings provided in the jQuery constructor <code>$(<i><html></i>)</code>. Meaning it isn't necessary to close elements tags that pass into the $() function.