I have the following HTML markup:-

<select name="Fault" class="textbox" id="fault">
<option>Single Light Out</option>
<option>Light Dim</option>
<option>Light On In Daytime</option>
<option>Erratic Operating Times</option>
<option>Flashing/Flickering</option>
<option>Causing Tv/Radio Interference</option>
<option>Obscured By Hedge/Tree Branches</option>
<option>Bracket Arm Needs Realigning</option>
<option>Shade/Cover Missing</option>
<option>Column In Poor Condition</option>
<option>Several Lights Out (please state how many)</option>
<option>Column Leaning</option>
<option>Door Missing/Wires Exposed</option>
<option>Column Knocked Down/Traffic Accident</option>
<option>Lantern Or Bracket Broken Off/Hanging On Wires</option>
<option>Shade/Cover Hanging Open</option>
</select>

<span id="faulttext" style="color:Red; display:none">Text in the span</span>

This Jquery snippet adds the last 5 options into an option group.

$('#fault option:nth-child(n+12)').wrapAll('<optgroup  label="Urgent Reasons">');

What I want to do is, remove the display:none if any of the items within the <optgroup> are selected, effectively displaying the span message, possibly with a fade in transition, and also hide the message if any options outside of the <optgroup> are selected.