Select: Add optgroup theming for non-native selects - Fix for #4809: optgroup element is not themed

docs/api/data-attributes.html

@@ -547,6 +547,10 @@ <h2><a href="../forms/radiobuttons/">Radio button</a></h2>
 			<h2><a href="../forms/selects/">Select</a></h2>
 			<p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
 			<table>
+				<tr>
+					<th>data-divider-theme</th>
+					<td>swatch letter (a-z) - Default "b" - Only applicable if <code>optgroup</code> support is used in non-native selects</td>
+				</tr>
 				<tr>
 					<th>data-icon</th>
 					<td>home | delete | plus | arrow-u | <strong>arrow-d</strong> | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | false </td>

docs/forms/selects/custom.html

@@ -277,7 +277,7 @@ <h3>Multiple selects</h3>
 
 
 	<h3>Optgroup support</h3>
-	<p>If a select menu contains <code>optgroup</code> elements, jQuery Mobile will create a divider &amp; group items based on the <code>label</code> attribute's text:</p>
+	<p>If a select menu contains <code>optgroup</code> elements, jQuery Mobile will create a divider and group items based on the <code>label</code> attribute's text. The default theme for group dividers is "b" (blue in the default theme) but can be changed with the <code>data-divider-theme</code> attribute on the select menu:</p>
 
 	<div data-role="fieldcontain">
 		<label for="select-choice-8" class="select">Shipping method:</label>

docs/forms/selects/options.html

@@ -45,7 +45,18 @@ <h2>Select menus</h2>
 				<p class="default">default: true</p>
 				<p>Applies the theme button border-radius to the select button if set to true. This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;</code></p>
 				<pre><code>$('select').selectmenu(<strong>{ corners: false }</strong>);</code></pre>
-			</dd>			
+			</dd>
+			<dt><code>dividerTheme</code> <em>string</em></dt>
+			<dd>
+				<p class="default">default: "b"</p>
+				<p>Sets the color scheme (swatch) for dividers in popup-based custom select menus when using the <code>optgroup</code> support. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+				<pre><code>$( document ).bind( "mobileinit", function(){
+	<strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
+});
+</code></pre>
+				<p>This option is also exposed as a data attribute: <code>data-divider-theme=&quot;a&quot;</code>.</p>
+			</dd>
+
 			<dt><code>icon</code> <em>string</em></dt>
 			<dd>
 				<p class="default">default: "arrow-down"</p>

js/widgets/forms/select.custom.js

@@ -46,7 +46,10 @@ define( [
 				"id": menuId,
 				"role": "listbox",
 				"aria-labelledby": buttonId
-			}).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ),
+				}).attr( "data-" + $.mobile.ns + "theme", widget.options.theme )
+					.attr( "data-" + $.mobile.ns + "divider-theme", widget.options.dividerTheme )
+					.appendTo( listbox ),
+
 
 			header = $( "<div>", {
 				"class": "ui-header ui-bar-" + widget.options.theme

js/widgets/forms/select.js

@@ -20,6 +20,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 		shadow: true,
 		iconshadow: true,
 		overlayTheme: "a",
+		dividerTheme: "b",
 		hidePlaceholderMenuItems: true,
 		closeText: "Close",
 		nativeMenu: true,