I want to add separators to php-generated list with jQuery

<select>
    <option value="0">all</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">other</option>
</select>

How to put separators after first eleent and before the last element that result is

<select>
    <option value="0">all</option>
    <option value="-1" disabled="disabled">------</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="-1" disabled="disabled">------</option>
    <option value="4">other</option>
</select>

?

Thank you

I want to add separators to php-generated list with jQuery

<select>
    <option value="0">all</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">other</option>
</select>

How to put separators after first eleent and before the last element that result is

<select>
    <option value="0">all</option>
    <option value="-1" disabled="disabled">------</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="-1" disabled="disabled">------</option>
    <option value="4">other</option>
</select>

?

Thank you

• javascript
• jquery
• html

• 1 Why not do this in php while you're generating the select? – David Thomas Commented Apr 28, 2013 at 9:41

3 Answers 3

var $ops = $('select option'), //refine selector if needed
    $sep = $('<option>', { text: '------', disabled: true, value: -1 });

$ops.first().after($sep.clone()).end()
    .last().before($sep);

Fiddle

Reference:

• Traversing - Filtering
• Manipulation - DOM Insertion, Outside

Don't know if it's exactly what you need, but the <optgroup> tag does something like that

Shorter code:

$("option[value=0]").after('<option value="-1" disabled="disabled">------</option>');