Select mit Umlauten richtig sortieren

Wie man mit jQuery in ein Select Element die Options nach A-Z sortiert wenn Umlaute im Text vorhanden sind.

JavaScript


jQuery.noConflict();

jQuery(document).ready(function($){

	var countrySelector = ["countryDemoSelect1","#countryDemoSelect2"];

	jQuery( countrySelector.join(',') ).each(function( index ) {

		var options = jQuery(this).children("option");
		var arr = options.map(function(_, o) { return { t: jQuery(o).text(), v: o.value }; }).get();
		arr.sort(function(o1, o2) {
			// Werte zum Vergleichen ohne Umlaute und ohne den Text zu verädern
			a = o1.t;b = o2.t;

			// 'bitte wählen ...' am Anfang belassen
			if(o1.v == '' || o2.v == '') {
				return -1;
			}

			a = a.toLowerCase();
			a = a.replace(/ä/g,"a");
			a = a.replace(/ö/g,"o");
			a = a.replace(/ü/g,"u");
			a = a.replace(/ß/g,"s");

			b = b.toLowerCase();
			b = b.replace(/ä/g,"a");
			b = b.replace(/ö/g,"o");
			b = b.replace(/ü/g,"u");
			b = b.replace(/ß/g,"s");

			return a > b ? 1 : a < b ? -1 : 0;
		});
		options.each(function(i, o) {
			o.value = arr[i].v;
			jQuery(o).text(arr[i].t);
		});

	});

});

HTML Code



<form>
<select id="countryDemoSelect1">
<option value="">bitte wählen...</option>
<option value="1">Australien</option>
<option value="2">Portugal</option>
<option value="3">Südafrika</option>
<option value="4">Österreich</option>
<option value="5">Hongkong</option>
<option value="6">Deutschland</option>
<option value="7">Norwegen</option>
<option value="8">Oman</option>
<option value="9">Weissrussland</option>
<option value="10">Otx-Phantasie-Land</option>
</select>

<br /><br />

<select id="countryDemoSelect2" size="11">
<option value="">bitte wählen...</option>
<option value="1">Australien</option>
<option value="2">Portugal</option>
<option value="3">Südafrika</option>
<option value="4">Österreich</option>
<option value="5">Hongkong</option>
<option value="6">Deutschland</option>
<option value="7">Norwegen</option>
<option value="8">Oman</option>
<option value="9">Weissrussland</option>
<option value="10">Otx-Phantasie-Land</option>
</select>
</form>

Demo



sortieren