나는 다음과 같은 선택 메뉴 (jsFiddle)이있어 : 자바 스크립트를 사용알파벳순으로 메뉴를 선택 하시겠습니까?
<select>
<option value="volvo">Cars</option>
<option value="saab">------------</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
을, 나는에 남아 있어야 처음 2 옵션 (Cars 및 -------)을 제외한 순으로 목록, 다시 정렬 할 방법 상단? 모든 도움을 미리 감사드립니다.
하십시오되는 자바 스크립트
var mylist = $('#sortableCars');
var listitems = mylist.children('option.sortMe').get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
mylist.append()를 사용하고 있으므로 정렬되지 않은 옵션과 정렬 된 옵션을 모두 사용할 수 있습니다. – CarlosZ
닫기,하지만 JS 꽤 내 테스트에서 작동하지 않습니다. listitem을'$ ('sortableCars> .sortMe')'로 변경하고 'sortMe' 클래스를'------- '옵션에서 제거하면 내 문제가 해결됩니다. –
'sortMe'클래스를 가진 사람들 만 선택하도록 수정했습니다. 재미있는 당신이 중요한 세부 사항을 놓칠 수있는 방법 ... –
경우와
<select id="sortableCars">
<option value="volvo">Cars</option>
<option class="sortMe" value="saab">------------</option>
<option class="sortMe" value="volvo">Volvo</option>
<option class="sortMe" value="saab">Saab</option>
<option class="sortMe" value="mercedes">Mercedes</option>
<option class="sortMe" value="audi">Audi</option>
</select>
을 순수한 사람이라면 jQuery가 구체적으로 언급했거나 요구 한 것이 전혀 없다고 할 수 있습니다. 이유는 무엇이든이 프로젝트에서 사용되지 않을 수 있습니다. 다음은 순수한 자바 스크립트를 사용하는 예입니다.
function sortlist(){
var cl = document.getElementById('carlist');
var clTexts = new Array();
for(i = 2; i < cl.length; i++){
clTexts[i-2] =
cl.options[i].text.toUpperCase() + "," +
cl.options[i].text + "," +
cl.options[i].value + "," +
cl.options[i].selected;
}
clTexts.sort();
for(i = 2; i < cl.length; i++){
var parts = clTexts[i-2].split(',');
cl.options[i].text = parts[1];
cl.options[i].value = parts[2];
if(parts[3] == "true"){
cl.options[i].selected = true;
}else{
cl.options[i].selected = false;
}
}
}
sortlist();
대소 중립적 업데이트.
정말 쉽기 때문에 jQuery로 작업하는 것을 정말 좋아합니다 ... 또한 가장 큰 몰락입니다. 추가 오버 헤드를 추가 할 이유가 없습니다 - 귀하의 답변에 투표 할 것입니다. –
jQuery는 훌륭하고 그 사용법을 강력히 주장합니다 ...하지만 누군가가 jQuery를 추가해야만 죄책감을 느낄 것입니다.이 같은 것을 지원하기 위해 ... 신뢰 투표에 감사드립니다. –
This 대문자를 모두 소문자보다 먼저 앞두고'AaBbCc'가 아닌'ABCabc'와 같은 것으로 이어질 것입니다. – Skizit
첫 번째 접근법은 Array.prototype.slice를 사용하여 <select> 요소의 자식 NodeList를 배열로 변환하는 Koolinc와 비슷합니다. 다음 그러나, 이것은 인터넷 익스플로러 8에서 작동하지 않습니다 낮은 그래서 추출을 변경, 분류 및 재 삽입 :
var sel = document.getElementsByTagName("select")[0],
opts = [];
// Extract the elements into an array
for (var i=sel.options.length-1; i >= 2; i--)
opts.push(sel.removeChild(sel.options[i]));
// Sort them
opts.sort(function (a, b) {
return a.innerHTML.localeCompare(b.innerHTML);
});
// Put them back into the <select>
while(opts.length)
sel.appendChild(opts.shift());
근무 데모 : http://jsfiddle.net/3YjNR/2/
이 단지 더 일반적인 것입니다 @Jeff Parker의 답변에 기반한 답변자!
function sortSelect(select, startAt) {
if(typeof startAt === 'undefined') {
startAt = 0;
}
var texts = [];
for(var i = startAt; i < select.length; i++) {
texts[i] = [
select.options[i].text.toUpperCase(),
select.options[i].text,
select.options[i].value
].join('|');
}
texts.sort();
texts.forEach(function(text, index) {
var parts = text.split('|');
select.options[startAt + index].text = parts[1];
select.options[startAt + index].value = parts[2];
});
}
나는 또한 피들을 만들었습니다. http://jsfiddle.net/4u86B/1/