使用jquery在两个选项之间附加一个选项

Question

我需要在两个选项之间附加一个选项。我发现了很多有关使用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>

Answer 1

您可以通过使用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()并选择第三个元素。

Answer 2

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