Question

我正在使用以下jQuery对表单中的select元素进行排序：

$('select.select-sortable').each(function () {
    var options = $(this).children();
    var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
    arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
    options.each(function(i, o) {
      o.value = arr[i].v;
      $(o).text(arr[i].t);
    });
});

排序有效，但每次刷新页面时显示的值都会发生变化。它按顺序改变第一选项 - ＆gt;第三种选择 - ＆gt;第二个选项 - ＆gt;第一种选择，无论有多少选项存在。

我已经将$(this).children(":first").attr("selected", true);添加到循环中，这会将选项锁定到第一个选项，但我仍然不明白为什么dsiplay正在改变，以及为什么按此顺序。有没有人有任何想法？

Answer 1

问题主要是因为未捕获选项的selected属性。

$('select').each(function () {
    var options = $(this).children();
    var arr = options.map(function(_, o) {
      return { t: $(o).text(), v: o.value, s: $(o).attr('selected') };
    }).get();
    arr.sort(function(o1, o2) { return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0; });
    options.each(function(i, o) {
      o.value = arr[i].v;
      $(o).text(arr[i].t);
      if(arr[i].s!==undefined){
        $(o).attr('selected','selected');
      }
    });
});

Answer 2

尝试下面的代码，它会排序并选择你要传入的值.eq（）

var arr = [],
$select = $("#ddsort"),
$options = $select.children();

$options.each(function(index, obj){
   arr.push($(this).val());
});

Array.sort(arr);
$select.empty();

$.each(arr,function(index, obj){
   $select.append("<option value="+obj+">"+obj+"</option>");   
});

$select.children().eq(2).attr("selected","selected");

请参阅此处的工作示例：http://jsfiddle.net/tFDNx/3/

我希望它有所帮助。

Answer 3

由于浏览器缓存而发生这种情况。它会在按下重新加载之前存储有关选择了哪个选项（具有什么值）的信息。如果您动态更改选项值，浏览器将在下次重新加载时反映这些更改，但您的脚本将立即再次修改值。它正在追赶你：）

顺便说一下。你不必做这样的结构：$(this).children(":first").attr("selected", true);在options[0].selected = true;循环之后放置的简单options.each就足够了。

jQuery在页面刷新时选择排序更改显示选项。发生了什么？

3 个答案: