Question

我一般都不是JQuery的程序员，但是最近几天一直在尝试使用它，因此按字母顺序对多个选择选项下拉列表进行排序。我想出了一个解决方案，但是我敢肯定有一种更加有效的方式来编写此代码，但目前这还超出了我的范围。如何在不直接调用每个选择的情况下进行选择？它需要在页面加载时发生，而无需用户干预。

window.addEventListener("load", function () {
    $("select[name='properties[Flavour 1]']").html($("select[name='properties[Flavour 1]'] option").sort(function (a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
    }))
    $("select[name='properties[Flavour 1]']").get(0).selectedIndex = 0;
  //Flavour 2
    $("select[name='properties[Flavour 2]']").html($("select[name='properties[Flavour 2]'] option").sort(function (a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
    }))
    $("select[name='properties[Flavour 2]']").get(0).selectedIndex = 0;
  //Flavour 3
    $("select[name='properties[Flavour 3]']").html($("select[name='properties[Flavour 3]'] option").sort(function (a, b) {
        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
    }))
    $("select[name='properties[Flavour 3]']").get(0).selectedIndex = 0;
}, false);

这种情况一直持续到Flavor 12，但是您对它的设置方式有所了解。

Answer 1

这应该给您一个通用的解决方案，我添加了一个包装器，这样我就可以得到计数，而不用硬编码数字或污染全局DOM。我添加了文档级别的替代方法，但如果可以的话，将其删除。

注意：经过一番思考，我记下了您的“ Flavours”拼写，并得出结论，这可能需要一些本地化，所以我修改了排序方式以使用它。 return a.text.localeCompare(b.text);

我还添加了一些类以显示那些已保留的类以及为保留先前值而选择的任何默认调整。

对于第二个示例，我将所有内容压缩为较短的jQuery版本，将其展开以查看该版本。

更多有关排序细节的信息：What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?

window.addEventListener("load", function() {
  let myflavours = $('#flavours').find('select[name^="properties[Flavour"]').length;
  //alternate
  let myflavoursNotAsGood = $(document).find('select[name^="properties[Flavour"]').length;
  console.log(myflavoursNotAsGood);
  for (let f = 1; f <= myflavours; f++) {
    let sel = $("select[name='properties[Flavour " + f + "]']");
    let v = sel.val();
    let opts = sel.find("option").sort(function(a, b) {
      return a.text.localeCompare(b.text);
    });
    sel.html(opts).val(v);
  }
}, false);

.water {
  color: blue;
}

.drink {
  color: orange;
}

.yuk {
  color: brown;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="flavours">
  <select name='properties[Flavour 1]'>
    <option>Cheese</option>
    <option>Apple</option>
    <option selected="selected">Cotton Candy</option>
    <option>Blueberry</option>
    <option class="yuk">Rotten Eggs</option>
    <option class="water">Swamp Water</option>
    <option class="water">Swamp Scum</option>
  </select>
  <select name='properties[Flavour 2]'>
    <option>Cheese</option>
    <option>Apple Smoked Bacon</option>
    <option selected="selected">Blueberry</option>
    <option class="yuk">Rotten Eggs</option>
    <option class="drink">Bier</option>
    <option>Bacon</option>
    <option class="water">Swamp Water</option>
    <option class="water">Swamp Scum</option>
  </select>
</div>

第二个示例与您构建的示例有所不同。

$(function() {
  $('#flavours').find('select[name^="properties[Flavour"]')
    .each(function(index, element) {
      let v = element.value;
      $(this).html($(this).find("option").sort(function(a, b) {
        return a.text.localeCompare(b.text);
      })).val(v);
    });
});

.water {
  color: blue;
}

.drink {
  color: orange;
}

.yuk {
  color: brown;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="flavours">
  <select name='properties[Flavour 1]'>
    <option>Cheese</option>
    <option>Apple</option>
    <option selected="selected">Cotton Candy</option>
    <option>Blueberry</option>
    <option class="yuk">Rotten Eggs</option>
    <option class="water">Swamp Water</option>
    <option class="water">Swamp Scum</option>
  </select>
  <select name='properties[Flavour 2]'>
    <option>Cheese</option>
    <option>Apple Smoked Bacon</option>
    <option selected="selected">Blueberry</option>
    <option class="yuk">Rotten Eggs</option>
    <option class="drink">Bier</option>
    <option>Bacon</option>
    <option class="water">Swamp Water</option>
    <option class="water">Swamp Scum</option>
  </select>
</div>

有效地对多个选择选项进行排序

1 个答案: