1

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

この Jquery スニペットは、最後の 5 つのオプションをオプション グループに追加します。

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

私がやりたいことは、display:none内の項目のいずれか<optgroup>が選択されている場合は削除し、スパンメッセージを効果的に表示し、おそらくフェードイントランジションを使用し、外のオプション<optgroup>が選択されている場合はメッセージを非表示にすることです。

4

2 に答える 2

1

どうですか：

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

例: http://jsfiddle.net/UPLUF/

于 2012-04-04T11:44:35.357 に答える
0 
$('#fault').on('change', function(){
    if($('option:selected',this).is('optgroup > option',this))
        $('#faulttext').show();
});

ここから作業して、逆の方法を実現できます。

于 2012-04-04T11:41:21.270 に答える