对 html 选择框进行排序但忽略选择

Question

我有一个动态创建的 html 选择框，我需要按字母顺序排序，但忽略显示 Select... 的占位符/选项

我从这里厌倦了以下内容，但意识到选择框没有 ID 只有名称

有任何想法吗？

<select style="width:250px" name="sortbyco">
    <option value="">Select2</option>
    <!--I would like to keep this at the top-->
    <option value="40934">Africa (CAF)</option>
    <option value="44624">Asia (AFC)</option>
    <option value="29521">Europe (UEFA)</option>
    <option value="43099">North &amp; Central America (CONCACAF)</option>
    <option value="38731">South America (CONMEBOL)</option>
    <option value="46617">Oceania (OFC)</option>
    <option value="40934">Africa (CAF2)</option>
</select>



$("#sortbyco").append($("#sortbyco option:gt(0)").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}));

Answer 1

这是一个没有 JQuery 的片段。 选择器现在有一个 id 以便在 css 选择器中使用。 没有空选项的选项数组的副本被排序，并重新添加到选择器中。

 const selector = document.querySelector(`#sortbyco`); // create an array of all options except the empty one const opts = [...selector.querySelectorAll(`option:not([value='']`)]; // copy to a sorted array (note: use localeCompare to compare strings) const sortedOpts = opts.sort( (a, b) => a.textContent.localeCompare(b.textContent) ); // remove the old options from the selector opts.forEach(opt => opt.remove()); // add the sorted options to the selector sortedOpts.forEach( (opt, i) => selector.appendChild(opt) );

 <select style="width:250px" id="sortbyco"> <option value="46617">Oceania (OFC)</option> <option value="43099">North &amp; Central America (CONCACAF)</option> <option value="40934">Africa (CAF)</option> <option value="44624">Asia (AFC)</option> <option value="29521">Europe (UEFA)</option> <option value="40934">Africa (CAF2)</option> <option value="38731">South America (CONMEBOL)</option> <option value="" selected>Select</option> <!-- ▲ will be at the top after sorting --> </select>

Answer 2

这是一个 jQuery 示例。

 $(function() { var opts = $("#sortbyco > option:not([value=''])").detach(); opts.sort(function(a, b) { return $(a).text() == $(b).text() ? 0 : $(a).text() < $(b).text() ? -1 : 1; }); $("#sortbyco").append(opts); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select style="width:250px" name="sortbyco" id="sortbyco"> <option value="">Select2</option> <!--I would like to keep this at the top--> <option value="40934">Africa (CAF)</option> <option value="44624">Asia (AFC)</option> <option value="29521">Europe (UEFA)</option> <option value="43099">North &amp; Central America (CONCACAF)</option> <option value="38731">South America (CONMEBOL)</option> <option value="46617">Oceania (OFC)</option> <option value="40934">Africa (CAF2)</option> </select>

这在 jQuery 对象数组上使用.sort() 。