Добавление опции между двумя опциями с помощью jquery - PullRequest
Новая
       13

Добавление опции между двумя опциями с помощью jquery

1 голос
/ 15 апреля 2020

Мне нужно добавить опцию между двумя опциями. Я нашел так много ответов относительно добавления опции, используя jquery. Но там опция добавляется к последней. Но мне нужно быть между двумя опциями.

Мне нужно вставить новую опцию между 2 & 3. Как я могу это сделать? 

$(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>

Ответы [ 2 ]

2 голосов
/ 15 апреля 2020

Вы можете сделать это, используя insertAfter() и нацелив option по его индексу с :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>

Или вы можете выбрать цель по ее значению: 

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

Или вы можете использовать insertBefore() и выбрать третий элемент вместо этого.

1 голос
/ 15 апреля 2020

Попробуйте .after() или .before() в зависимости от того, какова ваша контрольная точка. 

$(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>
...