Appending an option between two options using jquery

Question

I need to append an option between two options.I have found so many answers regarding appending an option using jquery.But there the option is appending to the last.But i need to be between two options.

I need to insert the new option between 2 & 3. How can I do it?

$(document).ready(function() {
  var option = $('<option disabled="disabled" value="">-------------------------</option>');
  $('#country').append(option);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country">
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
</select>

Rory McCrossan · Accepted Answer · 2020-04-15 13:53:53Z

2

You could do this by using insertAfter() and targeting the option by its index with :eq():

jQuery($ => {
  var $option = $('<option disabled="disabled" value="">-------------------------</option>');
  $option.insertAfter('#country option:eq(1)');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Or alternatively you could select the target by its value:

$option.insertAfter('#country option[value="2"]');

Or you could use insertBefore() and select the third element instead.

answered Apr 15, 2020 at 13:53

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noobie Over a year ago

Thanks for the answer.Apart from the question can i insert a <hr> instead of --------- as option

Rory McCrossan Over a year ago

No. Only <option> and <optgroup> elements can be children of a select. Not a <hr />

PeterKA · Accepted Answer · 2020-04-15 13:56:15Z

1

Try .after() or .before() depending on what your reference point is.

$(document).ready(function () {
    var option = $('<option disabled="disabled" value="">-------------------------</option>');
    $('#country option[value="2"]').after(option);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>

</select>

answered Apr 15, 2020 at 13:56

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

Appending an option between two options using jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related