HTMLソートされた選択リストをHTMLソートのアルファベット選択リストに変換する方法

ここで提案されている解決策の多くは読んでいます。ほとんどのソリューションでは、リスト内の項目を並べ替える方法が説明されていますが、アルファベット順にリストを再構築して古いリストの代わりに挿入する方法は説明されていません。オールインワンここでHTMLソートされた選択リストをHTMLソートのアルファベット選択リストに変換する方法

私のリスト：私は、「オプション値」に応じてアルファベット順に新しいリストで、上記のリストをソートする必要があり、その後、同じ場所に新しいソートされたリストを挿入

<select id="ciudadseleccionada"> 
    <option value="madrid" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-madrid"> 
     Madrid 
    </option> 
    <option value="barcelona" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-barcelona"> 
     Barcelona 
    </option> 
    <option value="sevilla" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-sevilla" selected="selected"> 
     Sevilla 
    </option> 
    <option value="valencia" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-valencia"> 
     Valencia 
    </option> 
    <option value="zaragoza" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-zaragoza"> 
     Zaragoza 
    </option> 
    <option value="malaga" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-malaga"> 
     Málaga 
    </option> 
    <option value="murcia" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-murcia"> 
     Murcia 
    </option> 
</select>

ソートされていないリストこれをjQueryやJavaスクリプトでどのように行うことができますか？オールインワン

EDIT：ここに私の完全なHTMLファイル、ロリーによって提案された解決策とビリーの提案で（ただし機能しない）：

<html> 
<head> 
<script type="text/javascript" src="jquery.min.js"></script>  
</head> 
<body> 
<select id="ciudadseleccionada"> 
    <option value="madrid" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-madrid"> 
     Madrid 
    </option> 
    <option value="barcelona" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-barcelona"> 
     Barcelona 
    </option> 
    <option value="sevilla" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-sevilla" selected="selected"> 
     Sevilla 
    </option> 
    <option value="valencia" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-valencia"> 
     Valencia 
    </option> 
    <option value="zaragoza" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-zaragoza"> 
     Zaragoza 
    </option> 
    <option value="malaga" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-malaga"> 
     Malaga 
    </option> 
    <option value="murcia" data-url="http://cupon.local/app_dev.php/ciudad/cambiar-a-murcia"> 
     Murcia 
    </option> 
</select> 

<script type="text/javascript"> 
$(document).ready(('#ciudadseleccionada option').sort(function(a, b) { 
    var aVal = $(a).val(), bVal = $(b).val(); 
    return aVal < bVal ? -1 : aVal > bVal ? 1 : 0; 
}).appendTo('#ciudadseleccionada')); 
</script>  

</body> 
</html>

出典

2016-03-19 Jorge H

は、あなたがあなた自身のsort()機能ロジックを実装する必要がこれを行うにはこれは正しい順序で親selectにそれらを再アタッチした後、option要素のvalue属性を比較して、このような何か：

$('#ciudadseleccionada option').sort(function(a, b) { 
    var aVal = $(a).val(), bVal = $(b).val(); 
    return aVal < bVal ? -1 : aVal > bVal ? 1 : 0; 
}).appendTo('#ciudadseleccionada')

Working example

出典

2016-03-19 22:22:45

私は入れ子になった/連鎖した三元を愛していませんが、ニースです。読みやすさには少し荒いです。 –

'return $（a）.val（）> $（b）.val（）;'はうまくいくようです –

答え+1のRoryに感謝します。私が持っている1つの質問は、これがどのように機能するかです。 ** "<"** and **">" **はJSの数学で使用されていませんか？私は** "$（a）.val（）" **と** "$（b）.val（）" **は整数ではなく、文字列を返します。リンクにはありますか？ –

HTMLソートされた選択リストをHTMLソートのアルファベット選択リストに変換する方法

答えて

関連する問題