我已经阅读了这里提出的许多解决方案。大多数解决方案解释了如何对列表中的项进行排序,但没有解释如何按字母顺序重建列表并插入它而不是旧列表,只是页面被加载。一体化。
这是我的清单:
<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>
我需要按照“选项值”按字母顺序在新列表中对上面的列表进行排序,然后在未排序列表的SAME PLACE中插入新的排序列表。 我如何用jQuery和/或java脚本来做到这一点?一体化。
编辑:这是我完整的HTML文件,其中包含Rory提出的解决方案和Billy的建议(但不起作用):
<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>
答案 0 :(得分:2)
要执行此操作,您需要实施自己的sort()
函数逻辑,该逻辑会比较value
元素的option
属性,然后将它们重新附加到其父select
}以正确的顺序,像这样:
$('#ciudadseleccionada option').sort(function(a, b) {
var aVal = $(a).val(), bVal = $(b).val();
return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
}).appendTo('#ciudadseleccionada')