私は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>
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 })
);
}
例のjQueryに依存します。
SortOptions("#my-list-id");
OR
:<。SELECT ID = "私のリスト-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のCODE -
$("#ddlList").html($('#ddlList option').sort(function(x, y) {
return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
}));
$("#ddlList").get(0).selectedIndex = 0;
e.preventDefault();
OR
あなたも、このためのソート配列を使用することができます -
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. TableSorter。ドロップダウンリストで並べ替え
- 2. jQuery Sortableを使用してフォトアルバムを並べ替える(並べ替え)
- 3. CSS3を使用してJavascriptで画像を並べ替えるビジュアル並べ替え
- 4. WebGridを使用した並べ替え
- 5. PHPを使用した並べ替え
- 6. 安定した並べ替えを使用してDataGridを並べ替える方法は?
- 7. Javascriptオブジェクトを値で並べ替える
- 8. post_views_count関数を使用して投稿を並べ替える方法(ビューで並べ替える)?
- 9. 並べ替えで並べ替え
- 10. jQueryを使用してテーブル列を並べ替えて切り替えます
- 11. NSMutableArrayからNSDictionariesを使用してセルを並べ替える
- 12. operator.itemgetterを使用して辞書を並べ替える
- 13. Coderush Expressを使用してクラスメンバーを並べ替える方法
- 14. easy68kを使用して番号を並べ替える
- 15. Cake PHPを使用して配列キーを並べ替える
- 16. JQuery UI Sortableを使用してデータベースフィールドを並べ替える
- 17. XSLを使用して属性を並べ替える
- 18. ReSharperを使用してタイプ別にメンバーを並べ替える
- 19. getItemPosition(オブジェクトオブジェクト)を使用してFragmentStatePagerAdapterのページを並べ替える
- 20. ado.netエンティティフレームワークを使用してgridviewを並べ替える
- 21. 重複キーを使用してオブジェクトを並べ替える
- 22. カスタムIComparerを使用してCollectionViewSourceを並べ替える
- 23. Spinnerを使用してカスタムリストビューアイテムを並べ替える
- 24. jqueryuiを使用してグリッドでレコードを並べ替える
- 25. TreeSetを使用してJPAエンティティを並べ替える方法
- 26. どのように並べ替えまたは並べ替えをJavaランタイムの並べ替えを使用して(近接に基づいて)
- 27. findAllを使用してvb.NETで並べ替えるlistOf
- 28. GridViewとObjectDataSourceを使用して並べ替える方法は?
- 29. Riakでデータを並べ替え/並べ替える方法は?
- 30. ASPxPivotGridカスタム並べ替え/並べ替えを削除する
あなたはアイテムドロップダウンとはどういう意味ですか? – Gumbo
ドロップダウンリストのデータをどのように取得していますか? – NoahD