Question

所以我试图用以下代码反转具有多个值的select元素的顺序：

<select multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>

脚本：

    var a = [];
    $('option').each(function() {
    a.push($(this).val());
    });

    a.reverse();

    for (i = 0; i < a.length; i++) {
    $('option').index[i].text(a[i]);
    }

显然我无法获取我的选项元素的索引来将其值设置为相反的顺序。

Answer 1

index属性是一个函数而不是数组。但是，您正在寻找.eq(i)或更好的pass a function to .text：

$('option').text(function(i) {
    return a[i];
});

替代方案，您可以更改元素本身的顺序，请参阅How may I sort a list alphabetically using jQuery?

Answer 2

如果您有兴趣，也可以采用稍微不同的方式：

//  Grab the options
var $select = $('select');
var options = $select.find('option');

// turn the nodelist into an array and reverse it
options = [].slice.call(options).reverse();

// empty the select
$select.empty();

// add each option back
$.each(options, function (i, el) {
  $select.append($(el));
});

DEMO

Answer 3

如果您在评论中使用@FelixKing建议的.eq(1)，那应该这样做：

$('option:eq(' + i + ')').text( a[i] );

Answer 4

我认为最好重新排序option代码本身，而不仅仅是重新排序text ex：如果默认选择了一个元素，或者具有一些data属性，你会搞砸它，因此以下解决方案将是最好的：

$('.reversed option').each(function () {
      $(this).prependTo($(this).parent());
});

这样我们遍历选项并将它们中的每一个添加到select标记中，最后我们以相反的顺序得到它们

更优化（用于表现）方式：

var select = $('.reversed');

select.find('option').each(function(){
    $(this).prependTo(select);
});

http://jsfiddle.net/6pk4z72o/

反转选择列表顺序

4 个答案: