Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding option group to option list using Jquery

I have the following HTML code (note no closing tags on <\option>) generated by Lotus Domino.

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

Using Jquery I want to transform this HTML once the document has loaded to this:- Adding an optgroup after the 11'th option and also adding the closing </option> tag

<select name="Fault" class="textbox">
<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>
    <optgroup label="Urgent Reasons">
<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>
<option>Other</option>
    </optgroup>
</select>
like image 505
general exception Avatar asked Feb 28 '26 13:02

general exception


1 Answers

With :nth-child(n+7) you select all children greater than index 7.

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

See JsFiddle

The non-closing <option> is non-valid HTML so I'm not sure how jQuery handles this, since it just does valid DOM-manipulation. I'm suggest that you fix this non-closing tags before you parse the HTML.

like image 143
Frank van Wijk Avatar answered Mar 03 '26 04:03

Frank van Wijk



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!