Jquery多选择器？

我有以下HTML标记：

<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>

单灯熄灭
光线暗淡
白天开灯
不稳定的运行时间
闪烁
造成电视/无线电干扰
被树篱/树枝遮挡
支架臂需要重新校准
阴凉处/遮盖物缺失
立柱状况不佳
几盏灯熄灭（请说明有多少盏灯熄灭）
立柱倾斜
门丢失/电线外露
立柱被撞倒/交通事故
灯笼或支架断开/挂在电线上
遮阳帘/罩子打开
跨中文本
单灯熄灭
光线暗淡
白天开灯
不稳定的运行时间
闪烁
造成电视/无线电干扰
被树篱/树枝遮挡
支架臂需要重新校准
阴凉处/遮盖物缺失
立柱状况不佳
几盏灯熄灭（请说明有多少盏灯熄灭）
立柱倾斜
门丢失/电线外露
立柱被撞倒/交通事故
灯笼或支架断开/挂在电线上
遮阳帘/罩子打开
跨中文本

以及以下jquery脚本：-

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

});

$（文档）.ready（函数（）{
$（“#错误选项：第n个子项（n+12）”）.wrapAll（“”）；
$（“#faultw选项：第n个子项（n+12）”）.wrapAll（“”）；
$（“#故障”）。更改（功能（事件）{
var$selected=$（this）.find（“选项：selected”）；
$（“#faulttext”）.fadeToggle（！！$selected.closest（“optgroup”）.length）；
});
$（“#faultw”）.change（函数（事件）{
var$selected=$（this）.find（“选项：selected”）；
$（“#faulttextw”）.fadeToggle（！！$selected.closest（“optgroup”）.length）；
});
});

请注意，有两个选择列表和两个跨距，第二个集合的后缀是w

还要注意，上面的jquery是重复的，用于处理带后缀的元素集

如何修改/整理上述jquery以处理这两个问题

使用

#fault，#faultw选项：第n个子项（n+12）

作为选择器似乎不起作用

同样在jquery的第二位，如果我要使用

$（“#fault，#faultw”）处理更改事件，那么更改

，那么我需要

fadeToggle

匹配的span文本

---

还是最好保持简单并保持原样？

使用选择器

#错误选项：第n个孩子（n+12），#错误选项：第n个孩子（n+12）

使用选择器

#错误选项：第n个孩子（n+12），#错误选项：第n个孩子（n+12）

逗号的作用类似于Or，从而启动一个不相关的选择器-

选项：第n个孩子（n+12）

末尾的部分仅适用于逗号后的选择器的其余部分，而不适用于逗号前的选择器。您需要使用：

#故障选项：第n个子项（n+12），#故障w选项：第n个子项（n+12）

对于

change

事件处理程序，您可以在

元素上使用HTML5

data-*

属性来指定要使用的范围的ID

HTML:

---

逗号的作用类似于OR，因此启动了一个不相关的选择器-末尾的

选项：第n个子（n+12）

部分仅适用于逗号后面的选择器的其余部分，而不适用于它前面的选择器。您需要使用：

\fault选项：第n个子（n+12），\faultw选项：第n个子（n+12）

对于

change

事件处理程序，您可以在

元素上使用HTML5

data-*

属性来指定要使用的范围的ID

HTML:

---

这是另一个解决方案

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

$（文档）.ready（函数（）{
$（“#错误选项：第n个子项（n+12），#错误选项：第n个子项（n+12）”）.wrapAll（“”）；
$（“#fault，#faultw”）.change（函数（事件）{
var$selected=$（this）.find（“选项：selected”）；
var id=$（this.attr（'id'）；
$（“#”+id）.fadeToggle（！！$selected.closest（“optgroup”）.length）；
});

---

})这是另一个解决办法

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

$（文档）.ready（函数（）{
$（“#错误选项：第n个子项（n+12），#错误选项：第n个子项（n+12）”）.wrapAll（“”）；
$（“#fault，#faultw”）.change（函数（事件）{
var$selected=$（this）.find（“选项：selected”）；
var id=$（this.attr（'id'）；
$（“#”+id）.fadeToggle（！！$selected.closest（“optgroup”）.length）；
});

---

})最不显眼的方法是使其取决于select在DOM中的实际位置。

.nextAll（'selector'）

查找该位置

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

---

最不引人注目的方法是使其取决于select在DOM中的实际位置。

.nextAll（'selector'）

查找该位置

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

$（“#fault，#faultw”）.find（'option:nth child（n+12）；

或

$（'option:nth child（n+12）'，'fault，#faultw'）；

将产生相同的结果。

$（'option:nth child（n+12）；'find（'option:nth child（n+12）

或

$（'option:nth child（n+12）；'faultw'），将产生相同的结果。