Javascript排序选择元素_Javascript_Html_Sorting

Javascript排序选择元素

javascript html sorting

Javascript排序选择元素,javascript,html,sorting,Javascript,Html,Sorting,有没有一种简单的方法可以对Javascript中的HTML Select元素列表进行排序？我想按他们的名字排序。每个Select元素都有其他字段，如title和value。我必须使用数组吗？我将使用数组： var x = []; var select = document.getElementById('mySelect'); var length = select.options.length; for(var i=length-1; i>=0; --i) { x.push(sel

有没有一种简单的方法可以对Javascript中的HTML Select元素列表进行排序？我想按他们的名字排序。每个Select元素都有其他字段，如title和value。我必须使用数组吗？

我将使用数组：

var x = [];
var select = document.getElementById('mySelect');
var length = select.options.length;
for(var i=length-1; i>=0; --i) {
   x.push(select.options[i]);
   select.removeChild(select.options[i]);
}
x.sort(function(o1,o2){
   if(o1.value > o2.value) {
      return 1;
   } else if(o1.value < o2.value) {
      return -1;
   }
   return 0;
});
for(var i=0; i<length; ++i) {
   select.appendChild(x[i]);
}

var x=[]；
var select=document.getElementById（'mySelect'）；
变量长度=select.options.length；
对于（变量i=length-1；i>=0；--i）{
x、 推送（选择选项[i]）；
select.removeChild（select.options[i]）；
}
x、 排序（功能（o1，o2）{
如果（o1.值>o2.值）{
返回1；
}否则如果（o1.值
var x = [];
var select = document.getElementById('mySelect');
var length = select.options.length;
for(var i=length-1; i>=0; --i) {
   x.push(select.options[i]);
   select.removeChild(select.options[i]);
}
x.sort(function(o1,o2){
   if(o1.value > o2.value) {
      return 1;
   } else if(o1.value < o2.value) {
      return -1;
   }
   return 0;
});
for(var i=0; i<length; ++i) {
   select.appendChild(x[i]);
}

var x=[]；
var select=document.getElementById（'mySelect'）；
变量长度=select.options.length；
对于（变量i=length-1；i>=0；--i）{
x、 推送（选择选项[i]）；
select.removeChild（select.options[i]）；
}
x、 排序（功能（o1，o2）{
如果（o1.值>o2.值）{
返回1；
}否则如果（o1.值对于（var i=0；i您应该使用数组的原因：
var x = [];
var select = document.getElementById('mySelect');
var length = select.options.length;
for(var i=length-1; i>=0; --i) {
   x.push(select.options[i]);
   select.removeChild(select.options[i]);
}
x.sort(function(o1,o2){
   if(o1.value > o2.value) {
      return 1;
   } else if(o1.value < o2.value) {
      return -1;
   }
   return 0;
});
for(var i=0; i<length; ++i) {
   select.appendChild(x[i]);
}


节点列表是只读的（不能对其应用数组排序）
与DOM操作相比，数组操作速度非常快

因此，您基本上需要将选项转换为一个数组，然后使用自定义比较函数对其应用sort
函数，最后以正确的顺序追加元素
用法
sortSelect("selection_id");

代码[]
(function(window){

// array functions are not working
// on nodeLists on IE, we need to
// to convert them to array
function toArray( obj ) {
  var i, arr = [];
  for ( i = obj.length; i--; ){
    arr[i] = obj[i];
  }
  return arr;
}

// custom compare function for sorting
// by the option's value
function sortByName( a, b ) {
  if ( a.value < b.value ) return -1;
  else if( a.value > b.value ) return 1;
  else return 0;
}

window.sortSelect = function(id) {

  // select the elements to be ordered
  var sel   = document.getElementById(id),
      items = sel.getElementsByTagName("option"),
      len   = items.length;

  // convert to array, to make sorting possible
  items = toArray( items );

  // do the item sorting by their value
  items = items.sort( sortByName );

  // append them back to the parent in order
  for ( var i = 0; i < len; i++ ) {
    sel.appendChild( items[i] );
  }
};

})(this);

（功能（窗口）{
//数组函数不工作
//关于IE的节点列表，我们需要
//将它们转换为数组
功能到阵列（obj）{
var i，arr=[]；
对于（i=obj.length；i--；）{
arr[i]=obj[i]；
}
返回arr；
}
//用于排序的自定义比较函数
//根据期权的价值
函数sortByName（a，b）{
如果（a.valueb.value）返回1；
否则返回0；
}
window.sortSelect=函数（id）{
//选择要排序的元素
var sel=document.getElementById（id），
items=sel.getElementsByTagName（“选项”），
len=项目长度；
//转换为数组，使排序成为可能
项目=toArray（项目）；
//按其值对项目进行排序
items=items.sort（sortByName）；
//按顺序将它们追加回父级
对于（变量i=0；i

测试时间：IE5.5+、FF2+、Chrome、Opera 9.6+
使用阵列的原因：
var x = [];
var select = document.getElementById('mySelect');
var length = select.options.length;
for(var i=length-1; i>=0; --i) {
   x.push(select.options[i]);
   select.removeChild(select.options[i]);
}
x.sort(function(o1,o2){
   if(o1.value > o2.value) {
      return 1;
   } else if(o1.value < o2.value) {
      return -1;
   }
   return 0;
});
for(var i=0; i<length; ++i) {
   select.appendChild(x[i]);
}


节点列表是只读的（不能对其应用数组排序）
与DOM操作相比，数组操作速度非常快

因此，您基本上需要将选项转换为一个数组，然后使用自定义比较函数对其应用sort
函数，最后以正确的顺序追加元素
用法
sortSelect("selection_id");

代码[]
(function(window){

// array functions are not working
// on nodeLists on IE, we need to
// to convert them to array
function toArray( obj ) {
  var i, arr = [];
  for ( i = obj.length; i--; ){
    arr[i] = obj[i];
  }
  return arr;
}

// custom compare function for sorting
// by the option's value
function sortByName( a, b ) {
  if ( a.value < b.value ) return -1;
  else if( a.value > b.value ) return 1;
  else return 0;
}

window.sortSelect = function(id) {

  // select the elements to be ordered
  var sel   = document.getElementById(id),
      items = sel.getElementsByTagName("option"),
      len   = items.length;

  // convert to array, to make sorting possible
  items = toArray( items );

  // do the item sorting by their value
  items = items.sort( sortByName );

  // append them back to the parent in order
  for ( var i = 0; i < len; i++ ) {
    sel.appendChild( items[i] );
  }
};

})(this);

（功能（窗口）{
//数组函数不工作
//关于IE的节点列表，我们需要
//将它们转换为数组
功能到阵列（obj）{
var i，arr=[]；
对于（i=obj.length；i--；）{
arr[i]=obj[i]；
}
返回arr；
}
//用于排序的自定义比较函数
//根据期权的价值
函数sortByName（a，b）{
如果（a.valueb.value）返回1；
否则返回0；
}
window.sortSelect=函数（id）{
//选择要排序的元素
var sel=document.getElementById（id），
items=sel.getElementsByTagName（“选项”），
len=项目长度；
//转换为数组，使排序成为可能
项目=toArray（项目）；
//按其值对项目进行排序
items=items.sort（sortByName）；
//按顺序将它们追加回父级
对于（变量i=0；i

测试对象：IE5.5+、FF2+、Chrome、Opera 9.6+
所有buggy解决方案。原因可能是索引错误或字符处理错误
工作解决方案。在需要的地方添加unicode。真正的冒泡排序
//tjcoder
function sortlist(cl){
    var chars = "0123456789abcdefghijklmnopqrstuvwxyz";
    for(var i=0;i<cl.length-1;i++){
        if(chars.indexOf(cl.options[i].text.substr(0,1).toLowerCase())>chars.indexOf(cl.options[i+1].text.substr(0,1).toLowerCase())){
            var tmp=cl.options[i].text;
            cl.options[i].text=cl.options[i+1].text;
            cl.options[i+1].text=tmp;
            i=-1;
        }
    }
}

//tjcoder
函数排序列表（cl）{
var chars=“0123456789abcdefghijklmnopqrstuvxyz”；
for（var i=0；ichars.indexOf（cl.options[i+1].text.substr（0,1）.toLowerCase（））{
var tmp=cl.options[i].文本；
cl.options[i].text=cl.options[i+1].text；
cl.options[i+1].text=tmp；
i=-1；
}
}
}

另外，我发表了评论，因为这在搜索选项排序的搜索索引上很高，并且所有答案解决方案都有错误。
所有错误解决方案..可能是因为索引错误或字符处理错误
<script type="text/javascript">
function Sort1()
{
var x1 = document.getElementById('s1');
var x2= new Array();
for(i=0;i<x1.length;i++)
{
 x2.push(x1[i].value);  
}

x2.sort();
x1.length=0;

for(i=0;i<x2.length;i++)
{
document.f1.s1[i]=new Option(x2[i],x2[i]);
}
}
</script>
<body>
<select id="s1" name="s1">
<option value="Sachin">Sachin</option>
<option value="Sehwag">Sehwag</option>
<option value="Zahir">Zahir</option>
<option value="Dhoni">Dhoni</option>

</select><br />
<input type="button" value="Sort" onclick="Sort1()" /><br />
</form>
</body>

工作解决方案。在需要的地方添加unicode。真正的冒泡排序
//tjcoder
function sortlist(cl){
    var chars = "0123456789abcdefghijklmnopqrstuvwxyz";
    for(var i=0;i<cl.length-1;i++){
        if(chars.indexOf(cl.options[i].text.substr(0,1).toLowerCase())>chars.indexOf(cl.options[i+1].text.substr(0,1).toLowerCase())){
            var tmp=cl.options[i].text;
            cl.options[i].text=cl.options[i+1].text;
            cl.options[i+1].text=tmp;
            i=-1;
        }
    }
}

//tjcoder
函数排序列表（cl）{
var chars=“0123456789abcdefghijklmnopqrstuvxyz”；
for（var i=0；ichars.indexOf（cl.options[i+1].text.substr（0,1）.toLowerCase（））{
var tmp=cl.options[i].文本；
cl.options[i].text=cl.options[i+1].text；
cl.options[i+1].text=tmp；
i=-1；
}
}
}

另一方面，我发表了评论，因为这在搜索选项排序的搜索索引中很高，而且所有答案解决方案都有错误。

<script type="text/javascript">
function Sort1()
{
var x1 = document.getElementById('s1');
var x2= new Array();
for(i=0;i<x1.length;i++)
{
 x2.push(x1[i].value);  
}

x2.sort();
x1.length=0;

for(i=0;i<x2.length;i++)
{
document.f1.s1[i]=new Option(x2[i],x2[i]);
}
}
</script>
<body>
<select id="s1" name="s1">
<option value="Sachin">Sachin</option>
<option value="Sehwag">Sehwag</option>
<option value="Zahir">Zahir</option>
<option value="Dhoni">Dhoni</option>

</select><br />
<input type="button" value="Sort" onclick="Sort1()" /><br />
</form>
</body>

函数Sort1（）
{
var x1=document.getElementById（'s1'）；
var x2=新数组（）；
对于（i=0；i
函数Sort1（）
{
var x1=document.getElementById（'s1'）；
var x2=新数组（）；
对于（i=0；iI刚刚在sort函数之后添加了：“o1=o1.toLowerCase（）；o2=o2.toLowerCase（）；”，因此它不区分大小写进行排序。工作得很好，谢谢：-）我刚刚在sort函数之后添加了：“o1=o1.toLowerCase（）；o2=o2.toLowerCase（）；”，因此它不区分大小写进行排序。工作得很好，谢谢：-）