Jquery multiple selectors?

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?

$('#fault, #faultw').find('option:nth-child(n+12)'); or $('option:nth-child(n+12)','#fault, #faultw'); will produce the same results. — MarkSmits
– MarkSmits, Commented Apr 4, 2012 at 12:23

Anthony Grist · Accepted Answer · 2012-04-04 12:11:34Z

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);
});

Frank van Wijk · Accepted Answer · 2012-04-04 12:08:24Z

1

Use selector #fault option:nth-child(n+12), #faultw option:nth-child(n+12)

answered Apr 4, 2012 at 12:08

Frank van Wijk

3,28222 silver badges42 bronze badges

Comments

Muhammad Raheel · Accepted Answer · 2012-04-04 12:16:44Z

0

Here is another solution

$(document).ready(function(){

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

$("#fault , #faultw").change(function (event) {
    var $selected = $(this).find("option:selected");
    var id  =   $(this).attr('id');

    $("#"+id).fadeToggle(!!$selected.closest("optgroup").length);
});

});

answered Apr 4, 2012 at 12:16

Muhammad Raheel

19.9k7 gold badges69 silver badges106 bronze badges

Comments

keystorm · Accepted Answer · 2012-04-04 12:19:56Z

0

The most unobtrusive way, would be to make it depend on the actual position of the select in the DOM. .nextAll('selector') looks for that.

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

answered Apr 4, 2012 at 12:19

keystorm

3521 silver badge10 bronze badges

Collectives™ on Stack Overflow

Jquery multiple selectors?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related