Javascript来select元素的内容进行sorting
有一个快速的方法来select元素的项目？ 或者我不得不求助于写作的JavaScript？
请任何想法。
<select size="4" name="lstALL" multiple="multiple" id="lstALL" tabindex="12" style="font-size:XX-Small;height:95%;width:100%;"> <option value="0"> XXX</option> <option value="1203">ABC</option> <option value="1013">MMM</option> </select> 这将做的伎俩。 只要将您的select元素传递给la： document.getElementById('lstALL')当您需要对列表进行sorting时。
function sortSelect(selElem) { var tmpAry = new Array(); for (var i=0;i<selElem.options.length;i++) { tmpAry[i] = new Array(); tmpAry[i][0] = selElem.options[i].text; tmpAry[i][1] = selElem.options[i].value; } tmpAry.sort(); while (selElem.options.length > 0) { selElem.options[0] = null; } for (var i=0;i<tmpAry.length;i++) { var op = new Option(tmpAry[i][0], tmpAry[i][1]); selElem.options[i] = op; } return; }
这个解决scheme对我来说使用jquery非常好，以为我在这里交叉引用它，因为我发现这个页面在另一个之前。 其他人可能也这样做。
$("#id").html($("#id option").sort(function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 }))
从sorting下拉列表使用Javascript
从W3C FAQ ：
尽pipe许多编程语言都有像下拉框这样的设备，它们可以在将项目列表显示为function的一部分之前进行sorting，但HTML <select>function没有这种function。 它按收到的顺序列出<选项>。
您必须手动对它们进行sorting以获取静态HTML文档，或者使用Javascript或其他编程方式sortingdynamic文档。
我有同样的问题。 这里是我提出的jQuery解决scheme ：
var options = jQuery.makeArray(optionElements). sort(function(a,b) { return (a.innerHTML > b.innerHTML) ? 1 : -1; }); selectElement.html(options);
另一种select：
function sortSelect(elem) { var tmpAry = []; // Retain selected value before sorting var selectedValue = elem[elem.selectedIndex].value; // Grab all existing entries for (var i=0;i<elem.options.length;i++) tmpAry.push(elem.options[i]); // Sort array by text attribute tmpAry.sort(function(a,b){ return (a.text < b.text)?-1:1; }); // Wipe out existing elements while (elem.options.length > 0) elem.options[0] = null; // Restore sorted elements var newSelectedIndex = 0; for (var i=0;i<tmpAry.length;i++) { elem.options[i] = tmpAry[i]; if(elem.options[i].value == selectedValue) newSelectedIndex = i; } elem.selectedIndex = newSelectedIndex; // Set new selected index after sorting return; }
是的DOK有正确的答案…要么在编写HTML之前对结果进行预先sorting（假设它是dynamic的，并且要对输出负责），要么写javascript。
Javascriptsorting方法将成为你的朋友在这里。 只需从select列表中拉出值，然后对其进行sorting，然后放回:-)
Í认为这是一个更好的select（我使用@Matty的代码和改进！）：
function sortSelect(selElem, bCase) { var tmpAry = new Array(); bCase = (bCase ? true : false); for (var i=0;i<selElem.options.length;i++) { tmpAry[i] = new Array(); tmpAry[i][0] = selElem.options[i].text; tmpAry[i][1] = selElem.options[i].value; } if (bCase) tmpAry.sort(function (a, b) { var ret = 0; var iPos = 0; while (ret == 0 && iPos < a.length && iPos < b.length) { ret = (String(a).toLowerCase().charCodeAt(iPos) - String(b).toLowerCase().charCodeAt(iPos)); iPos ++; } if (ret == 0) { ret = (String(a).length - String(b).length); } return ret; }); else tmpAry.sort(); while (selElem.options.length > 0) { selElem.options[0] = null; } for (var i=0;i<tmpAry.length;i++) { var op = new Option(tmpAry[i][0], tmpAry[i][1]); selElem.options[i] = op; } return; }
我使用这种冒泡sorting，因为我不能通过options数组中的.value来sorting它们，它是一个数字。 这样我得到他们正确的命令。 我希望对你也有用。
function sortSelect(selElem) { for (var i=0; i<(selElem.options.length-1); i++) for (var j=i+1; j<selElem.options.length; j++) if (parseInt(selElem.options[j].value) < parseInt(selElem.options[i].value)) { var dummy = new Option(selElem.options[i].text, selElem.options[i].value); selElem.options[i] = new Option(selElem.options[j].text, selElem.options[j].value); selElem.options[j] = dummy; } }
处理由Marco Lazzeri和Terre Porter提供的答案（如果这个答案有用，就给他们投票），我想出了一个稍有不同的解决scheme，保留选定的值（可能不保留事件处理程序或附加数据） jQuery 。
// save the selected value for sorting var v = jQuery("#id").val(); // sort the options and select the value that was saved j$("#id") .html(j$("#id option").sort(function(a,b){ return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;})) .val(v);
我有一个类似的问题，除了我想要select的项目显示在顶部，我不想清除哪些项目被选中（多选列表）。 我的是基于jQuery的…
function SortMultiSelect_SelectedTop(slt) { var options = $(slt).find("option").sort(function (a, b) { if (a.selected && !b.selected) return -1; if (!a.selected && b.selected) return 1; if (a.text < b.text) return -1; if (a.text > b.text) return 1; return 0; }); $(slt).empty().append(options).scrollTop(0); }
没有select顶部，它会是这样的。
function SortMultiSelect(slt) { var options = $(slt).find("option").sort(function (a, b) { if (a.text < b.text) return -1; if (a.text > b.text) return 1; return 0; }); $(slt).empty().append(options).scrollTop(0); }
我很快把一个允许select方向（“asc”或“desc”），是否应该在选项值（true或false）上进行比较以及在比较之前是否应该修剪前导和尾随空白（布尔）。
这种方法的好处是保留了选定的选项，并且还应该保留所有其他特殊属性/触发器。
function sortOpts(select,dir,value,trim) { value = typeof value == 'boolean' ? value : false; dir = ['asc','desc'].indexOf(dir) > -1 ? dir : 'asc'; trim = typeof trim == 'boolean' ? trim : true; if(!select) return false; var opts = select.getElementsByTagName('option'); var options = []; for(var i in opts) { if(parseInt(i)==i) { if(trim) { opts[i].innerHTML = opts[i].innerHTML.replace(/^\s*(.*)\s*$/,'$1'); opts[i].value = opts[i].value.replace(/^\s*(.*)\s*$/,'$1'); } options.push(opts[i]); } } options.sort(value ? sortOpts.sortVals : sortOpts.sortText); if(dir == 'desc') options.reverse(); options.reverse(); for(var i in options) { select.insertBefore(options[i],select.getElementsByTagName('option')[0]); } } sortOpts.sortText = function(a,b) { return a.innerHTML > b.innerHTML ? 1 : -1; } sortOpts.sortVals = function(a,b) { return a.value > b.value ? 1 : -1; }
这是我在本板上最喜欢的3个答案的重新编译：
- 乔克最好，最简单的答案。
- Terry Porter的简单jQuery方法。
- SmokeyPHP的可configurationfunction。
结果是一个易于使用，易于configuration的function。
第一个参数可以是select对象，select对象的ID或具有至less两个维度的数组。
第二个参数是可选的。 默认为按选项文本索引0进行sorting。可以通过任何其他索引进行sorting。 可以通过1，或文本“值”，按值sorting。
按文字sorting（全部按文字sorting）：
sortSelect('select_object_id'); sortSelect('select_object_id', 0); sortSelect(selectObject); sortSelect(selectObject, 0);
按值sorting（全部按值sorting）：
sortSelect('select_object_id', 'value'); sortSelect('select_object_id', 1); sortSelect(selectObject, 1);
用另一个索引对任何数组sorting：
var myArray = [ ['ignored0', 'ignored1', 'Z-sortme2'], ['ignored0', 'ignored1', 'A-sortme2'], ['ignored0', 'ignored1', 'C-sortme2'], ]; sortSelect(myArray,2);
最后一个将按照索引2sorting数组。
主sortingfunction
function sortSelect(selElem, sortVal) { // Checks for an object or string. Uses string as ID. switch(typeof selElem) { case "string": selElem = document.getElementById(selElem); break; case "object": if(selElem==null) return false; break; default: return false; } // Builds the options list. var tmpAry = new Array(); for (var i=0;i<selElem.options.length;i++) { tmpAry[i] = new Array(); tmpAry[i][0] = selElem.options[i].text; tmpAry[i][1] = selElem.options[i].value; } // allows sortVal to be optional, defaults to text. switch(sortVal) { case "value": // sort by value sortVal = 1; break; default: // sort by text sortVal = 0; } tmpAry.sort(function(a, b) { return a[sortVal] == b[sortVal] ? 0 : a[sortVal] < b[sortVal] ? -1 : 1; }); // removes all options from the select. while (selElem.options.length > 0) { selElem.options[0] = null; } // recreates all options with the new order. for (var i=0;i<tmpAry.length;i++) { var op = new Option(tmpAry[i][0], tmpAry[i][1]); selElem.options[i] = op; } return true; }
受@Terre Porter的回答启发，我觉得这个实现起来很简单（使用jQuery）
var $options = jQuery("#my-dropdownlist-id > option"); // or jQuery("#my-dropdownlist-id").find("option") $options.sort(function(a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 })
但是，对于Alpha / Numeric下拉列表：
启发： https : //stackoverflow.com/a/4340339/1598891
var $options = jQuery(dropDownList).find("option"); var reAlpha = /[^a-zA-Z]/g; var reNumeric = /[^0-9]/g; $options.sort(function AlphaNumericSort($a,$b) { var a = $a.text; var b = $b.text; var aAlpha = a.replace(reAlpha, ""); var bAlpha = b.replace(reAlpha, ""); if(aAlpha === bAlpha) { var aNumeric = parseInt(a.replace(reNumeric, ""), 10); var bNumeric = parseInt(b.replace(reNumeric, ""), 10); return aNumeric === bNumeric ? 0 : aNumeric > bNumeric ? 1 : -1; } else { return aAlpha > bAlpha ? 1 : -1; } })
希望它会有所帮助
function call() { var x = document.getElementById("mySelect"); var optionVal = new Array(); for (i = 0; i < x.length; i++) { optionVal.push(x.options[i].text); } for (i = x.length; i >= 0; i--) { x.remove(i); } optionVal.sort(); for (var i = 0; i < optionVal.length; i++) { var opt = optionVal[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; x.appendChild(el); } }
我们的想法是将select框的所有元素放入数组中，删除select框值以避免重写，对数组进行sorting，然后将已sorting的数组推回到select框
不像Marco的JQuery例子，但与原型（我可能会失去一个更优雅的解决scheme），这将是：
function sort_select(select) { var options = $A(select.options).sortBy(function(o) { return o.innerHTML }); select.innerHTML = ""; options.each(function(o) { select.insert(o); } ); }
然后传递一个select元素：
sort_select( $('category-select') );
另一种方式来做到这一点与jQuery：
// sorting; var selectElm = $("select"), selectSorted = selectElm.find("option").toArray().sort(function (a, b) { return (a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) ? 1 : -1; }); selectElm.empty(); $.each(selectSorted, function (key, value) { selectElm.append(value); });
试试这个…希望它会为您提供一个解决scheme：
function sortlist_name() { var lb = document.getElementById('mylist'); arrTexts = new Array(); newTexts = new Array(); txt = new Array(); newArray =new Array(); for(i=0; i<lb.length; i++) { arrTexts[i] = lb.options[i].text; } for(i=0;i<arrTexts.length; i++) { str = arrTexts[i].split(" -> "); newTexts[i] = str[1]+' -> '+str[0]; } newTexts.sort(); for(i=0;i<newTexts.length; i++) { txt = newTexts[i].split(' -> '); newArray[i] = txt[1]+' -> '+txt[0]; } for(i=0; i<lb.length; i++) { lb.options[i].text = newArray[i]; lb.options[i].value = newArray[i]; } } /***********revrse by name******/ function sortreverse_name() { var lb = document.getElementById('mylist'); arrTexts = new Array(); newTexts = new Array(); txt = new Array(); newArray =new Array(); for(i=0; i<lb.length; i++) { arrTexts[i] = lb.options[i].text; } for(i=0;i<arrTexts.length; i++) { str = arrTexts[i].split(" -> "); newTexts[i] = str[1]+' -> '+str[0]; } newTexts.reverse(); for(i=0;i<newTexts.length; i++) { txt = newTexts[i].split(' -> '); newArray[i] = txt[1]+' -> '+txt[0]; } for(i=0; i<lb.length; i++) { lb.options[i].text = newArray[i]; lb.options[i].value = newArray[i]; } } function sortlist_id() { var lb = document.getElementById('mylist'); arrTexts = new Array(); for(i=0; i<lb.length; i++) { arrTexts[i] = lb.options[i].text; } arrTexts.sort(); for(i=0; i<lb.length; i++) { lb.options[i].text = arrTexts[i]; lb.options[i].value = arrTexts[i]; } } /***********revrse by id******/ function sortreverse_id() { var lb = document.getElementById('mylist'); arrTexts = new Array(); for(i=0; i<lb.length; i++) { arrTexts[i] = lb.options[i].text; } arrTexts.reverse(); for(i=0; i<lb.length; i++) { lb.options[i].text = arrTexts[i]; lb.options[i].value = arrTexts[i]; } } </script> ID<a href="javascript:sortlist_id()"> ▲ </a> <a href="javascript:sortreverse_id()">▼</a> | Name<a href="javascript:sortlist_name()"> ▲ </a> <a href="javascript:sortreverse_name()">▼</a><br/> <select name=mylist id=mylist size=8 style='width:150px'> <option value="bill">4 -> Bill</option> <option value="carl">5 -> Carl</option> <option value="Anton">1 -> Anton</option> <option value="mike">2 -> Mike</option> <option value="peter">3 -> Peter</option> </select> <br>
function sortItems(c) { var options = c.options; Array.prototype.sort.call(options, function (a, b) { var aText = a.text.toLowerCase(); var bText = b.text.toLowerCase(); if (aText < bText) { return -1; } else if (aText > bText) { return 1; } else { return 0; } }); } sortItems(document.getElementById('lstALL'));
