javascript - Html, inserting option list separators - Stack Overflow

admin管理员组

文章数量:1426644

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

Share Improve this question Follow asked Apr 28, 2013 at 9:37 user2301515user2301515 5,11766 gold badges3636 silver badges5050 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

本文标签： JavascriptHTMLinserting option list separatorsStack Overflow