Question

我已经阅读了这里提出的许多解决方案。大多数解决方案解释了如何对列表中的项进行排序，但没有解释如何按字母顺序重建列表并插入它而不是旧列表，只是页面被加载。一体化。

这是我的清单：

<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>

Answer 1

要执行此操作，您需要实施自己的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')

Working example

如何将HTML未排序的选择列表转换为HTML排序字母选择列表

1 个答案: