자바 스크립트를 사용하여 항목을 정렬하려면 아무에게도이 작업을 수행 할 방법을 알려 줄 수 있습니까?자바 스크립트를 사용하여 드롭 다운 목록 정렬
답변
옵션 값과 텍스트를 배열에 넣고 배열을 정렬 한 다음 기존 옵션 요소를 정렬 된 배열로 구성된 새 요소로 바꿉니다.
$("#id").html($("#id option").sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))
을하지만 그것은 당신이 달성하기 위해 노력하고 왜, 무엇을 물어 아마도 더 나은 :
여기는 내가 어떻게 찾았는지 발견 한 링크입니다. http://www.w3schools.com/jsref/jsref_sort.asp – mrTomahawk
이 같은 jQuery를 뭔가를 사용할 수 있습니다. = "내 목록-ID"
< 선택 ID>로 정렬됩니다 :
SortOptions("#my-list-id");
또는
+1은 순전히 jQuery없이 수행하는 작업에 기반합니다 (아래 답변 참조). . –
이것은 나를 위해 훌륭했습니다. 내 드롭 다운은 다른 드롭 다운 변경시 채워집니다. 이 코드는 트릭을 만들었습니다! 감사합니다 @ mastro – shanabus
꿈과 같은 작품 ... 간결한 ... 감사합니다! –
<select id="foo" size="10">
<option value="3">three</option>
<option value="1">one</option>
<option value="0">zero</option>
<option value="2">two</option>
</select>
<script>
// WARN: won't handle OPTGROUPs!
var sel = document.getElementById('foo');
// convert OPTIONs NodeList to an Array
// - keep in mind that we're using the original OPTION objects
var ary = (function(nl) {
var a = [];
for (var i = 0, len = nl.length; i < len; i++)
a.push(nl.item(i));
return a;
})(sel.options);
// sort OPTIONs Array
ary.sort(function(a,b){
// sort by "value"? (numeric comparison)
// NOTE: please remember what ".value" means for OPTION objects
return a.value - b.value;
// or by "label"? (lexicographic comparison) - case sensitive
//return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
// or by "label"? (lexicographic comparison) - case insensitive
//var aText = a.text.toLowerCase();
//var bText = b.text.toLowerCase();
//return aText < bText ? -1 : aText > bText ? 1 : 0;
});
// remove all OPTIONs from SELECT (don't worry, the original
// OPTION objects are still referenced in "ary") ;-)
for (var i = 0, len = ary.length; i < len; i++)
sel.remove(ary[i].index);
// (re)add re-ordered OPTIONs to SELECT
for (var i = 0, len = ary.length; i < len; i++)
sel.add(ary[i], null);
</script>
JQuery와 ON
function SortOptions(id) {
var prePrepend = "#";
if (id.match("^#") == "#") prePrepend = "";
$(prePrepend + id).html($(prePrepend + id + " option").sort(
function (a, b) { return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 })
);
}
예 의존
SortOptions("my-list-id");
텍스트 대신 _value_를 기준으로 항목을 정렬하려면 함수가 다음과 같이 읽습니다. 'function (a, b) {return a.value - b.value})' –
이 일을 JQuery와 정렬 기능을 시도 할 수 있습니다 -
HTML 코드를 -
<select id="ddlList">
<option value="3">Three</option>
<option value="1">One</option>
<option value="1">one</option>
<option value="1">a</option>
<option value="1">b</option>
<option value="1">A</option>
<option value="1">B</option>
<option value="0">Zero</option>
<option value="2">Two</option>
<option value="8">Eight</option>
</select>
jQuery 코드 -
$("#ddlList").html($('#ddlList option').sort(function(x, y) {
return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
}));
$("#ddlList").get(0).selectedIndex = 0;
e.preventDefault();
또는
당신은이에 대한 정렬 배열을 사용할 수 있습니다 -
var options = $('#ddlList option');
var arr = options.map(function (_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function (o1, o2) { return o1.t.toUpperCase() > o2.t.toUpperCase() ? 1 : o1.t.toUpperCase() < o2.t.toUpperCase() ? -1 : 0; });
options.each(function (i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
- 1. 자바 스크립트를 사용하여 변수에 여러 개의 드롭 다운 목록 저장
- 2. asp.net 드롭 다운 - 자바 스크립트를 사용하여 채우기
- 3. 풀다운 상자/드롭 다운 목록 정렬/정렬
- 4. 드롭 다운 목록 배경색
- 5. ASP.NET/SQL 드롭 다운 목록 정렬 순서
- 6. 양식 - 드롭 다운 목록
- 7. 사전을 사용하여 드롭 다운 목록
- 8. 드롭 다운 목록 생성
- 9. 자바 드롭 다운 체크리스트
- 10. 동적 드롭 다운 목록
- 11. 메가 드롭 다운 목록
- 12. asp.net 드롭 다운 목록
- 13. 자바 스크립트를 사용하여 동적으로 변경되는 HTML 드롭 다운 메뉴
- 14. 자바 스크립트를 사용하여 드롭 다운 목록에 대해 selectedvalue를 설정하십시오.
- 15. Ajax를 사용하여 드롭 다운 목록 채우기
- 16. ASP.NET의 드롭 다운 목록
- 17. xcode의 드롭 다운 목록
- 18. 종속 드롭 다운 목록
- 19. 드롭 다운 목록 필터링
- 20. iPhone 드롭 다운 목록
- 21. Json 드롭 다운 목록
- 22. PHP 드롭 다운 목록
- 23. 간단한 드롭 다운 목록
- 24. 드롭 다운 목록 autopostback?
- 25. 계단식 드롭 다운 목록
- 26. 드롭 다운 목록 작성
- 27. Gridview의 드롭 다운 목록
- 28. 아이폰 드롭 다운 목록
- 29. 드롭 다운 목록 국경
- 30. 드롭 다운 목록
당신은 항목 드롭 다운 무엇을 의미합니까? – Gumbo
드롭 다운 목록을 채우는 데이터는 어떻게 받고 있습니까? – NoahD