Я хочу сортировать раскрывающиеся элементы с помощью javascript, может ли кто-нибудь сказать мне, как это сделать.Сортировка выпадающего списка с помощью Javascript
ответ
Поместите значения параметров и текст в массив, отсортируйте массив, а затем замените существующие элементы элементов новыми элементами, созданными из отсортированного массива.
вот ссылка, которую я нашел, которая показывает, как это сделать: http://www.w3schools.com/jsref/jsref_sort.asp – mrTomahawk
Вы можете использовать JQuery и что-то вроде этого:
$("#id").html($("#id option").sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))
Но это, наверное, лучше спросить, почему и что вы пытаетесь достичь.
+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>
. Сравнение значений будет работать только для чисел; для лексикографической сортировки см. компаратор в ответе масто. – bobince
Извините, но я не понимаю, в чем смысл вашего комментария, так как я уверен, что вы посмотрели ОДНУЮ строку под этим цифровым сравнением, которое делает точно, угадайте, что такое «лексикографическое сравнение» на опциях «текст» ?! :( – altblue
Приятное использование
ЗАВИСИТ Jquery
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 })
);
}
Примеры:
< выберите идентификатор = "мой-список-ID"> сортируется с:
SortOptions("#my-list-id");
ИЛИ
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);
});
Что вы имеете в виду ниспадающего пунктов? – Gumbo
Как вы получаете данные, которые вы заполняете выпадающим списком? – NoahD