Как показать <Select > в отсортированном виде

Как я могу отсортировать элементы <option> тега <select>, используя JavaScript?Как показать <Select > в отсортированном виде

Вот HTML у меня есть:

<form action="example.asp"> 
<div> 
<select size="3"> 
<option value="op2" >Option 2</option> 
<option value="op1">Option 1</option> 
<option value="op4">Option 4</option> 
<option value="op3">Option 3</option> 

</select> 
</div> 
</form>

источник

2010-08-12 Tree

<script language="JavaScript" type="text/javascript"> 
function sortlist() { 
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]; 
} 
} 
</script> 


<form action="#"> 
<select name=mylist id=mylist size=5> 
<option value="Anton">Anton 
<option value="Mike">Mike 
<option value="Peter">Peter 
<option value="Bill">Bill 
<option value="Carl">Carl 
</select> 
<br> 
<a href="javascript:sortlist()">sort</a> 
</form>

источник

2010-08-12 12:18:19

Мне не нужно нажимать и сортировать. его shoult будет сортировать, пока его загрузка – Tree

, чем вызов этой функции в событии загрузки тела –

@Tree Затем просто вызовите sortlist() из элемента

Вы должны думать об этом на предварительном уровне HTML-создания. Если вы генерируете их из какого-то списка или с помощью механизма динамической страницы, сортируйте их перед тем, как создавать свои элементы опций - это самый ясный способ;)

источник

2010-08-12 12:20:25

Это не всегда лучший способ сделать это. Иногда вам просто нужно сортировать список html. Например, у меня только что клиент дал мне список элементов для размещения в списке html. Я бы предпочел сохранить их в том же порядке, что и клиент дал мне (для удобства обслуживания), но отсортировал их при отображении пользователю. – CpnCrunch

Если значение отличается от текста, используйте следующую функцию для сортировки оба из них. Это просто обновленная версия вышеупомянутого решения и сохранит как имя, так и соответствующее значение.

<script language="JavaScript" type="text/javascript"> 
function sortList() 
{ 
    var lb = document.getElementById('mylist'); 
    arrTexts = new Array(); 
    arrValues = new Array(); 
    arrOldTexts = new Array(); 

    for(i=0; i<lb.length; i++) 
    { 
     arrTexts[i] = lb.options[i].text; 
     arrValues[i] = lb.options[i].value; 
     arrOldTexts[i] = lb.options[i].text; 
    } 

    arrTexts.sort(); 

    for(i=0; i<lb.length; i++) 
    { 
     lb.options[i].text = arrTexts[i]; 
     for(j=0; j<lb.length; j++) 
     { 
      if (arrTexts[i] == arrOldTexts[j]) 
      { 
       lb.options[i].value = arrValues[j]; 
       j = lb.length; 
      } 
     } 
    } 
} 
</script>

источник

2014-10-14 06:38:08

Более простое решение, опираясь на ответ Ясира аль-AGL в:

function sortList() 
{ 
    var lb = document.getElementById('mylist'); 
    arr = new Array(); 

    for(i = 0; i < lb.length; i++) { 
     arr[i] = lb.options[i]; 
    } 

    arr.sort(function(a,b) { 
     return (a.text > b.text)? 1 : ((a.text < b.text)? -1 : 0); 
    }); // or use localeCompare() if you prefer 

    for(i = 0; i < lb.length; i++) { 
     lb.options[i] = arr[i]; 
    } 
}

Короче говоря, вам нужен только один массив, элементы которого являются просто ссылки на оригинальные «варианты» объектов. Функция sort() также имеет право выбирать, какое свойство свойства сортировать (т. Е. Свойство text, свойство value и т. Д.).

Не забудьте, однако, что свойство «selectedIndex» элемента управления «select» больше не может быть корректным после сортировки.

источник

2016-04-16 02:26:04 jeffpar

Смежные вопросы