Question

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>


<select name="Fault" class="textbox" id="faultw">
<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="faulttextw" style="color:Red; display:none">Text in the span</span>

and the following jquery script:-

$(document).ready(function(){

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

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

$("#fault").change(function (event) {
    var $selected = $(this).find("option:selected");
    $("#faulttext").fadeToggle(!!$selected.closest("optgroup").length);
});

$("#faultw").change(function (event) {
    var $selected = $(this).find("option:selected");
    $("#faulttextw").fadeToggle(!!$selected.closest("optgroup").length);
});

});

Notice that there are two select lists and two spans, the second set is suffixed with a w.

Also notice that the above jquery is duplicated to deal with the suffixed set of elements.

How would i modify/tidy the above jquery to deal with both?

Using #fault, #faultw option:nth-child(n+12) as a selector doesn’t seem to work.

Also on the second bit of the jquery, if i am to handle the change event using $("#fault, #faultw").change then i would need to fadeToggle the matching span text.

Or is it best to keep it simple and leave it as it is?

Answer 1

The comma acts like an OR, thereby starting an unrelated selector – the option:nth-child(n+12) part at the end only applies to the rest of the selector after the comma, not the selector before it as well. You’ll need to use: #fault option:nth-child(n+12), #faultw option:nth-child(n+12).

As for the change event handler, you could use a HTML5 data-* attribute on the <select> element to specify the ID of the span to work with.

HTML:

<select name="Fault" class="textbox" id="fault" data-spanid="faulttext">
    // options
</select>

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


<select name="Fault" class="textbox" id="faultw" data-spanid="faulttextw">
    // options
</select>

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

jQuery:

$("#fault, #faultw").change(function (event) {
    var $selected = $(this).find("option:selected");
    $("#" + $(this).data('spanid')).fadeToggle(!!$selected.closest("optgroup").length);
});