Question

我选择了：

<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
...
<option value="37">Switzerland</option>
...
</select>

如何将文本Switzerland的选项移动到列表中的第二个位置？结果将是：

 <select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="37">Switzerland</option>
<option value="40">Afghanistan</option>
...
</select>

Answer 1

您可以在select中的第一个孩子之后使用jquery after()来 - 请参阅下面的演示：

$('select[name=country_id] option:first-child').after($('select[name=country_id] option[value=37]'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="37">Switzerland</option>
</select>

Answer 2

您可以获取所有<option>元素，然后按value属性对其进行过滤。最后，一旦选择了正确的元素（在本例中为瑞士），您可以使用insertBefore()在DOM中移动其位置。

示例：

var $opts = $('.selCommon').children(); $opts.filter('[value="37"]').insertBefore( $opts.eq(1) )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selCommon" name="country_id"> <option value="">Select</option> <option value="40">Afghanistan</option> <option value="40">United Kingdom</option> <option value="40">USA</option> <option value="37">Switzerland</option> </select>

Answer 3

你也可以试试这个：

   $(document).ready(function(){
      var options = $('.selCommon option' );

      var SwitzerlandIndex=0;
      var cnt=0;

      $(options).each(function(){
        if($(this).text() == "Switzerland"){
          SwitzerlandIndex=cnt;
        }  
        cnt++;
      });

      $(options[SwitzerlandIndex]).insertAfter($(options[0]));
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="41">Test</option>
<option value="37">Switzerland</option>
<option value="38">Test 2</option>
</select>

Answer 4

您可以对值

进行排序

$('.selCommon option').sort((a, b) => a.value - b.value).appendTo('.selCommon');
$('.selCommon').val("")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
  <option value="">Select</option>
  <option value="40">Afghanistan</option>
  <option value="57">Sweden</option>
  <option value="37">Switzerland</option>
  <option value="12">USA</option>
</select>

jQuery将选择选项移动到第二个位置

4 个答案: